未知宽高元素如何在一个div中上下左右居中对齐
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了未知宽高元素如何在一个div中上下左右居中对齐相关的知识，希望对你有一定的参考价值。
<body>
<div id="div1">
<img src="../06图片懒加载/img/img1.png"/>
</div>
</body>
那么，img元素如何在div中居中对齐呢?
第一种方法：
第一步:在img标签后面添加一个span元素
<body>
<div id="div1">
<img src="../06图片懒加载/img/img1.png"/><span></span>
</div>
</body>
第二步:为这几个元素设置样式
1.把#div1元素设置text-align:center
2.把添加的元素span转化为行内块元素(display:inline-block)，并且设置vertical-align:middle
3.为img元素设置vertical-align:middle。
完成以上操作之后，这个Img元素在#div1中就是垂直居中的了，这种方法的兼容性等比较好，唯一的缺点可能就是要在元素后面添加一个元素
(注意：这个元素最好是span元素，如果是div元素的话，在低版本ie下有兼容问题)
第二种方法：
这种方法利用了css3的新特性
为#div1设置display:flex;vertical-align:middle;align-items:middle。
这种方法的缺点就是只要不支持css3的浏览器，那就不会起作用了。
以上是关于未知宽高元素如何在一个div中上下左右居中对齐的主要内容，如果未能解决你的问题，请参考以下文章