一个未知宽高的元素在div中垂直水平居中

MadPecker 发布于2019-08-22 17:32 / 2951人阅读

摘要：注意，这个添加的元素最好是元素，如果是的话，在低版本下的话有问题。因为不支持转换为行内块元素。第二种方法这种方法就是利用的新特性了。这种方法的缺点就是，如果浏览器不支持，那就没用了。

那么，如何让img元素在div中居中对齐呢？

第一种方法

第一步：在img标签后面添加一个元素，比如说添加一个span元素

第二步：为这几个元素设置样式

#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，那就没用了。

GPU云服务器云服务器水平垂直居中垂直居中实现垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95263.html

一个未知宽高的元素在div中垂直水平居中

摘要：注意，这个添加的元素最好是元素，如果是的话，在低版本下的话有问题。因为不支持转换为行内块元素。第二种方法这种方法就是利用的新特性了。这种方法的缺点就是，如果浏览器不支持，那就没用了。那么，如何让img元素在div中居中对齐呢？第一种方法第一步：在img标签后面添加一个元素，比如说添加一个span元素 ...

luodongseu 2019-08-29 15:31 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
CSS水平垂直居中总结

摘要：垂直居中表格布局法为什么就能垂直居中拜读了张鑫旭大神的文章行高指的是什么行高指的是文本行的基线间的距离。行内框具有垂直居中性。 CSS水平居中、垂直居中、水平垂直居中方法总结文字的水平居中: text-align:center; 单行文字的垂直居中： line-height:30px; height:30px; 让有宽度的div水平居中： margin: 0 auto; width:...

mist14 2019-08-30 13:13 评论0 收藏0
常用的CSS水平垂直居中方法大全

摘要：作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助已知宽高背景图与背景图上的文字都水平垂直居中有宽度的水平居中有绝对定位的水平居中作为一名程序媛在编写页面的时候经常还会遇到水平或者垂直居中的一些布局今天正好有空就把各种居中的方式都总结了一下分享给大家希望能给大家带来帮助 1.已知宽高背景图与背景...

bergwhite 2019-08-29 12:38 评论0 收藏0