㈠ HTML問題:怎麼讓一個圖片在div中垂直居中
第一種情況：知道圖片的寬高和div的寬高；
<div style="width:300px;height:500px;">
<img src="1.jpg" style="float:left;width:200px;height:300px;margin:100px50px">
</div>
㈡ CSS圖片垂直居中怎麼設置
摘要 我們經常使用「margin: 0 auto」來實現水平居中，而我們一直認為「margin: auto」是不能實現垂直居中，但是實際上，我們僅需要添加一些限制便能實現我們的效果，就是通過定位：
㈢ css background-image 怎樣讓圖片垂直居中
background:url(../images/arrow_u.png) no-repeat center center;
樓主試下
㈣ 如何讓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值賦給它。
㈤ 如何將html中圖片文字垂直居中
文字垂直居中：
設置標簽高度height，並且設置行高line-height值與height值一樣。
也可以給父標簽設置相對定位（position：relative），然後文字用一個行內標簽（如span）包裹，並且給span設置絕對定位。
div垂直居中：
可以使用margin或padding來控制。比如margin：70% 0；（上下70%，左右0）
如果滿意，望採納，謝謝！如果不懂，可隨時追問！
㈥ 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不認識
㈦ 怎樣讓圖片在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同理。
㈧ css html 如何將圖片img標簽 水平居中 垂直居中 和水平垂直居中
1、第一種css代碼如圖所示。display設置成table-cell，text-align為center，垂直居中設置vertical-align為middle。
㈨ 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實現居中