導航:首頁 > 圖片大全 > 如何讓圖片垂直居中
如何讓圖片垂直居中
發布時間：2022-01-12 23:11:13⑴ CSS中如何實現圖片垂直居中
在曾經的
淘寶UED
招聘
中有這樣一道題目：
「使用純CSS實現未知尺寸的圖片(但高寬都小於200px)在200px的正方形容器中水平和垂直居中。」
當然出題並不是隨意，而是有其現實的原因，垂直居中是
淘寶
工作中最常遇到的一個問題，很有代表性。
題目的難點在於兩點：
1.垂直居中；
2.圖片是個置換元素，有些特殊的特性。
至於如何解決，下面是一個權衡的相對結構干凈，CSS簡單的解決方法：.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;}"
/>
⑵ css html 如何將圖片img標簽 水平居中 垂直居中 和水平垂直居中
1、第一種css代碼如圖所示。display設置成table-cell，text-align為center，垂直居中設置vertical-align為middle。
⑶ 怎麼讓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中的圖片垂直居中對齊
分兩種情況：
1、圖片寬高固定，這種情況很簡單。
水平居中：就在圖片的css中加 dispaly:block;margin:0 auto;
垂直居中：自己算出（div的高度-圖片的高度）/2，得到margin-top值即可。
2、圖片高度未知，這個布局比較難實現。一般我是用js做的。
水平居中：同上，在圖片的css中加 dispaly:block;margin:0 auto;
垂直居中：用js算出（div的高度-圖片的高度）/2，得到margin-top值賦給它。
⑸ 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;}
⑹ 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實現居中
⑺ 怎樣讓圖片在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同理。
與如何讓圖片垂直居中相關的資料
- 表格內的圖片如何引用
- 列印過程中圖片如何放大列印
- 摩托車玩具圖片大全
- 如何設置手機不能自動保存的圖片
- 手機拍照如何控制圖片
- 如何選擇食用油圖片
- 經絡圖片大全
- 圖片如何配文字簡單
- word文檔中如何在段落中插入圖片
- 多個圖片組合如何配音
- 購物圖片真實圖片大全
- ps如何把文字圖片底色變透明
- 如何修改圖片上傳的名稱
- 親寶寶如何批量刪除圖片
- word線路圖片如何轉換cad
- 微信里的圖片如何刪除
- 抖音如何保存自己想要的圖片
- 電腦剪映如何添加電視劇圖片背景
- 如何長按獲取圖片
- 土星簡筆畫圖片大全
- 如何導入高清的圖片到procreate里
- 虱子草圖片大全
- 如何將word文檔圖片文字更改顏色
- 公眾號如何設置圖片商品鏈接
- 手機之間圖片如何快速傳遞
- 小紅書圖片如何無水印去掉
- 如何用手機剪輯圖片到1m以內
- 農村平房車庫圖片大全
- 咖啡logo圖片大全
- 形狀中如何插入圖片
- 如何加圖片亮度
- ps如何做圓形的圖片
- 清朝妃嬪手繪圖片大全
- word中四張很大圖片如何拼一起
- ps如何把圖片放在畫布外面
- 如何把ppt圖片設置圓形
- 王俊凱抱貓圖片大全
- 恐龍檔案卡圖片大全
- 如何把自己的圖片弄成息屏
- 華為榮耀8c如何設圖片壁紙
- 代銷商如何修正寶貝圖片
- 鞋上畫畫圖片大全