很多时候,我们的图片和文字不是垂直居中的一个样式,一般情况都是使用弹性盒子,将垂直对齐居中,不过也可以使用更方便的方法vertical-align来对齐文字和图片。但是当我们设置这个属性的时候,发现并没有什么效果,根本就没有垂直对齐,以下我列举了很多情况不生效的原因。

示例代码:

<div style="display:inline;vertical-align:middle;">
原色<img src='1.jpg'/>
</div>

1.如果设置在容器上,不能是块级元素,如:div,h1等标签,需要换成行内元素,如:span,不过也可以使用“display:inline”转换为行内元素,“display:inline-block”行内块元素。

2.如果设置在内容身上,有时会生效,当时垂直对齐的效果并不是很好,所以最好还是设置在父元素身上。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐