一個未知寬高的元素在div中垂直程度居中

2023年5月31日 107次阅读 来源: 金豆豆 
<body>
    <div id="#div1">
        <img src="img1.png"></img>
    </div>
</body>

那末，怎樣讓img元素在div中居中對齊呢？

第一種要領

第一步：在img標籤背面增加一個元素，比如說增加一個span元素

<body>
    <div id="div1">
        <img src="img1.png"></img><span></span>
    </div>
</body>

第二步：為這幾個元素設置款式

#div1 {
    text-align:center;
}

#div1 span {
    display:inline-block;
    vertical-align: middle;
}

#div1 img {
    vertical-align:middle;
}

好啦，完成以上操縱，這個Img元素在div中就是垂直居中的了，這類要領的兼容性很好的，唯一的瑕玷就是需要在元素背面增加一個元素啦。注重，這個增加的元素最好是span元素，假如是div的話，在低版本ie下的話有題目。由於不支持div轉換為行內塊元素。

第二種要領

這類要領就是應用css3的新特徵了。

#div1 {
    display:flex;
    vertical-align:middle;
    align-items:middle
}

這類要領的瑕玷就是，假如瀏覽器不支持css3，那就沒用了。

    原文作者：金豆豆
    原文地址: https://segmentfault.com/a/1190000015042342
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞