一個未知寬高的元素在div中垂直水平居中

時間 2019-11-10

標籤一個未知高的元素 div 垂直水平居中欄目 CSS 简体版

原文原文鏈接

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

那麼，如何讓img元素在div中居中對齊呢？css

第一種方法

第一步：在img標籤後面添加一個元素，好比說添加一個span元素css3

<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轉換爲行內塊元素。flex

這種方法就是利用css3的新特性了。spa

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

這種方法的缺點就是，若是瀏覽器不支持css3，那就沒用了。code

相關標籤/搜索