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

MadPecker 發(fā)布于2019-08-22 17:32 / 2957人閱讀

摘要：注意，這個(gè)添加的元素最好是元素，如果是的話，在低版本下的話有問題。因?yàn)椴恢С洲D(zhuǎn)換為行內(nèi)塊元素。第二種方法這種方法就是利用的新特性了。這種方法的缺點(diǎn)就是，如果瀏覽器不支持，那就沒用了。

那么，如何讓img元素在div中居中對(duì)齊呢？

第一種方法

第一步：在img標(biāo)簽后面添加一個(gè)元素，比如說添加一個(gè)span元素

第二步：為這幾個(gè)元素設(shè)置樣式

#div1 {
    text-align:center;
}

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

#div1 img {
    vertical-align:middle;
}

好啦，完成以上操作，這個(gè)Img元素在div中就是垂直居中的了，這種方法的兼容性很好的，唯一的缺點(diǎn)就是需要在元素后面添加一個(gè)元素啦。注意，這個(gè)添加的元素最好是span元素，如果是div的話，在低版本ie下的話有問題。因?yàn)椴恢С謉iv轉(zhuǎn)換為行內(nèi)塊元素。

第二種方法

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

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

這種方法的缺點(diǎn)就是，如果瀏覽器不支持css3，那就沒用了。

GPU云服務(wù)器云服務(wù)器水平垂直居中垂直居中實(shí)現(xiàn)垂直居中文字垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95263.html

相關(guān)文章

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

摘要：注意，這個(gè)添加的元素最好是元素，如果是的話，在低版本下的話有問題。因?yàn)椴恢С洲D(zhuǎn)換為行內(nèi)塊元素。第二種方法這種方法就是利用的新特性了。這種方法的缺點(diǎn)就是，如果瀏覽器不支持，那就沒用了。那么，如何讓img元素在div中居中對(duì)齊呢？第一種方法第一步：在img標(biāo)簽后面添加一個(gè)元素，比如說添加一個(gè)span元素 ...

luodongseu 2019-08-29 15:31 評(píng)論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評(píng)論0 收藏0
CSS居中完全指南——構(gòu)建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當(dāng)于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評(píng)論0 收藏0
CSS水平垂直居中總結(jié)

摘要：垂直居中表格布局法為什么就能垂直居中拜讀了張鑫旭大神的文章行高指的是什么行高指的是文本行的基線間的距離。行內(nèi)框具有垂直居中性。 CSS水平居中、垂直居中、水平垂直居中方法總結(jié) 文字的水平居中: text-align:center; 單行文字的垂直居中： line-height:30px; height:30px; 讓有寬度的div水平居中： margin: 0 auto; width:...

mist14 2019-08-30 13:13 評(píng)論0 收藏0
常用的CSS水平垂直居中方法大全

摘要：作為一名程序媛在編寫頁面的時(shí)候經(jīng)常還會(huì)遇到水平或者垂直居中的一些布局今天正好有空就把各種居中的方式都總結(jié)了一下分享給大家希望能給大家?guī)韼椭阎獙捀弑尘皥D與背景圖上的文字都水平垂直居中有寬度的水平居中有絕對(duì)定位的水平居中作為一名程序媛在編寫頁面的時(shí)候經(jīng)常還會(huì)遇到水平或者垂直居中的一些布局今天正好有空就把各種居中的方式都總結(jié)了一下分享給大家希望能給大家?guī)韼椭?1.已知寬高背景圖與背景...

bergwhite 2019-08-29 12:38 評(píng)論0 收藏0