div中的圖片怎麼居中_怎樣讓圖片在DIV中垂直居中

① div 裡面的圖片怎麼居中顯示

給toplogo設置寬度,
然後給你<img />設置屬性,margin:0 auto; 是水平居中,margin:auto 0;是上線居中,
也可以在toplogo中加入text-align:center;屬性居中

② 在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實現居中

③ 怎麼讓div內的圖片垂直居中

設置div的高度height與行高line-height相同或者計算圖片居中時在div中的位置，給div使用padding-top或者給圖片加margin-top

④ 怎麼讓img在div里垂直居中

body結構
<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body

方法一：
將display設置成table-cell，然後水平居中設置text-align為center，垂直居中設置vertical-align為middle。
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>

方法二：
通過position定位來實現。將div設置成相對定位relative，將img設置成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位於div的中心，要是圖片的中心位於div的中心，就需要將圖片向上移動圖片高度的一半，並向左移動圖片寬度的一半。
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 寬度的一半 */
}
</style>

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

給div設定text-align:center;可使圖片水平居中，再給圖片img設定
vertical-align:middle;即可達到垂直居中（切記，是給圖片加，不是div，很多人容易搞錯）
還有一個方法，就是用table布局，td默認是水平方向居左的，但是垂直方向是居中的，所以你套一個table後再插入圖片的話，也能很好的達到垂直居中

⑥ 怎樣用css只讓div中的圖片居中

1、打開在線寫前端代碼的網站如jsrun或者jsfiddle。

⑦ div中的圖片比div大，如何讓其居中顯示

第一種：
將圖片的max-width:數值px; 數值設置成你的div2的寬度
第二種：
將圖片作為div2的背景圖，這種可以不裁剪圖片尺寸。
background:url(圖片路徑) center top no-repeat;

⑧ div里圖片有些怎麼居中

加入.New img{display:block;margin:0px auto;}這樣圖片就居中了，設置block原因是為了換行，還不用加入</br>了

⑨ 怎樣讓圖片在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同理。

⑩ div中圖片怎麼居中

試一下margin: 0 auto;

熱點內容

心痛女孩子的動態圖片發布：2025-10-20 08:52:06 瀏覽：200

女孩白色內內圖片發布：2025-10-20 08:51:57 瀏覽：211

入冬早上好文字圖片發布：2025-10-20 08:36:43 瀏覽：621

帥氣男生換裝圖片發布：2025-10-20 08:36:40 瀏覽：220

短發面條卷發型圖片發布：2025-10-20 08:36:30 瀏覽：1006

可愛小孩子圖片賣萌發布：2025-10-20 08:11:59 瀏覽：643

花的圖畫手繪簡單圖片發布：2025-10-20 08:11:10 瀏覽：775

動漫公主服裝圖片大全圖片大全發布：2025-10-20 08:06:45 瀏覽：177

動漫繪畫作品圖片發布：2025-10-20 08:00:34 瀏覽：132

小女孩幾幾的現狀圖片發布：2025-10-20 07:57:04 瀏覽：309

櫻花圖片動漫圖發布：2025-10-20 07:36:11 瀏覽：744

成熟潮男搭配衣服圖片發布：2025-10-20 06:59:38 瀏覽：174

動漫人物圖片大全黑白發布：2025-10-20 06:50:09 瀏覽：1092

最多動漫圖片發布：2025-10-20 06:43:12 瀏覽：847

小鳥衣服圖片大全可愛發布：2025-10-20 06:42:30 瀏覽：513

手擋太陽的圖片女生發布：2025-10-20 06:36:07 瀏覽：560

男女生圖片背影圖片發布：2025-10-20 06:22:21 瀏覽：1094

想太多心會累文字圖片發布：2025-10-20 06:13:47 瀏覽：437

簡單動漫圖片教程視頻發布：2025-10-20 05:56:17 瀏覽：627

女孩發育圖片視頻發布：2025-10-20 05:54:07 瀏覽：626

導航:首頁 > 動漫圖片 > div中的圖片怎麼居中

div中的圖片怎麼居中

與div中的圖片怎麼居中相關的資料