怎麼讓圖片垂直居中

1. div中如何使圖片垂直居中

.box {/*非IE的主流瀏覽器識別的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*設置水平居中*/
text-align:center;
/* 針對IE的Hack */
*display: block;
*font-size: 175px;/*約為高度的0.873，200*0.873 約為175*/
*font-family:Arial;/*防止非utf-8引起的hack失效問題，如gbk編碼*/
width:200px;
height:200px;
border: 1px solid #eee;}
.box img {/*設置圖片垂直居中*/
vertical-align:middle;}

2. 怎樣讓圖片在DIV中垂直居中

例子：<div
class="ac"
style="width:1000px;height:500px;position:relative;
z-index:9;">
<img
width="200px"
height="200px"
style="position:absolute;
top:150px;
left:400px;
z-index:9"
/>
</div>

這里的top和left需要數學天賦了，一般top=外div總高height/2+需要垂直居中內容總高height/2；left同理。

3. 如何讓div中的圖片垂直居中對齊

分兩種情況：
1、圖片寬高固定，這種情況很簡單。

水平居中：就在圖片的css中加 dispaly:block;margin:0 auto;

垂直居中：自己算出（div的高度-圖片的高度）/2，得到margin-top值即可。

2、圖片高度未知，這個布局比較難實現。一般我是用js做的。

水平居中：同上，在圖片的css中加 dispaly:block;margin:0 auto;

垂直居中：用js算出（div的高度-圖片的高度）/2，得到margin-top值賦給它。

4. div 怎麼讓圖片垂直居中

比如
<div style="margin:0 auto;text-align:center"><img src="196999_142815071333_2.jpg" /></div>

5. div+css，圖片怎麼設置在DIV中垂直居中

div+css，圖片設置在DIV中垂直居中:
方法一：
思路：利用text-align屬性將圖片水平居中，然後設置padding-top的值使其垂直居中。
結構如下：
<div>
<img src="images/tt.gif" width="150" height="100" />
</div>
CSS樣式如下：
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
釋義：
圖片的尺寸為150x100px，DIV的大小為300x200px；
background-color:#CCC; border:#000 1px solid;為DIV加個邊框和背景色，便於觀察效果。
text-align:center,實現圖片的水平居中；padding-top:50px，50px這個數值是經過計算得到的，padding-top的值具體演算法如下：（DIV的高度 – 圖片的高度）/2，但這里要注意，根據盒模型原理，我們還要將DIV原來的高度200減去padding-top的值，這樣顯示的才是正確的，否則DIV會變高。

方法二：
思路：只用padding屬性，通過計算求得居中
結構代碼同上；
CSS樣式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
備註：這里DIV的寬高計算都遵循盒模型原理，計算方法同上。

方法三：
思路：
利用圖片的margin屬性將圖片水平居中，利用DIV的padding屬性將圖片垂直居中。
結構代碼同上；
CSS代碼如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
備註：
Img是內聯元素，要設置其margin屬性使其居中，就要將其轉換為塊元素display:block;然後利用margin:0 auto;實現圖片的水平居中；（有的設計師為圖片再加個div標簽，然後通過div標簽的margin實現居中

6. css html 如何將圖片img標簽 水平居中 垂直居中 和水平垂直居中

1、第一種css代碼如圖所示。display設置成table-cell，text-align為center，垂直居中設置vertical-align為middle。

7. CSS如何實現讓圖片垂直居中

在一個容器里再定義一個絕對定位的p容器，再在p容器里放需要垂直居中的圖片，圖片定義相對定位的CSS。 直接上CSS代碼：#pic{width:300px; height:300px; background-color:green; border:6pxsolid#ccc; text-align:center; position:relative; display:table-cell; vertical-align:middle;}#picp{*position:absolute;top:50%;left:50%;}#picpimg{*position:relative;top:-50%;left:-50%;}#pic是容器，裡面放一個p容器，該容器採用絕對定位，最後插入圖片，圖片採用相對定位。 這里用到了一個hack,*只有IE瀏覽器可以識別，Firefox不認識

8. 如何用word使圖片上下居中

在圖片上右鍵-設置對象格式，選擇圖片版式。

圖片格式改為四周型或者環繞型，不能用嵌入式。然後直接在圖片格式裡面選水平居中對齊就行了。圖片不能垂直居中。

文字垂直居中：如果沒有文本框直接點擊工具欄上面的快捷鍵「居中對齊即可」。此時不存在垂直居中。
如果帶文本框：選中內容—右鍵單擊—單元格對齊方式—直接選垂直對齊即可。

9. 怎麼才可以使背景圖片垂直居中呢

body的background-position:50% 50%,無論browser窗口如何變化背景圖的中心與窗口中心重合，但是在FF和opera中，只能實現在水平方向上居中，垂直方向背景圖的中心與窗口的上邊緣重合。如果把backgrond-position:50% 0%,那水平居中，垂直方向上背景圖的上邊緣和窗口的上邊緣重合，不知道什麼理由。另外background-position:center center效果跟年50% 50% 相同

10. html能設置圖片水平和垂直居中嗎

可以的，水平居中是align=「center」 垂直是valign="middle"，代碼實例如下：
<table width="1000px" border="1">
<tr><td align="center"><img src="xx.jpg"></td></tr>
</table>
上面的代碼即設置圖片水平居中，同理可以設置其垂直居中。