css 为什么很多时候,vertical-align不生效,图片和文字垂直居中对其
很多时候,我们的图片和文字不是垂直居中的一个样式,一般情况都是使用弹性盒子,将垂直对齐居中,不过也可以使用更方便的方法vertical-align来对齐文字和图片。但是当我们设置这个属性的时候,发现并没有什么效果,根本就没有垂直对齐,以下我列举了很多情况不生效的原因。示例代码:<div style="display:inline;vertical-align:middle;">原色&l
·
很多时候,我们的图片和文字不是垂直居中的一个样式,一般情况都是使用弹性盒子,将垂直对齐居中,不过也可以使用更方便的方法vertical-align来对齐文字和图片。但是当我们设置这个属性的时候,发现并没有什么效果,根本就没有垂直对齐,以下我列举了很多情况不生效的原因。
示例代码:
<div style="display:inline;vertical-align:middle;">
原色<img src='1.jpg'/>
</div>
1.如果设置在容器上,不能是块级元素,如:div,h1等标签,需要换成行内元素,如:span,不过也可以使用“display:inline”转换为行内元素,“display:inline-block”行内块元素。
2.如果设置在内容身上,有时会生效,当时垂直对齐的效果并不是很好,所以最好还是设置在父元素身上。
更多推荐
已为社区贡献2条内容
所有评论(0)