图文混排时，图片和文字垂直如何居中

最新推荐文章于 2022-09-20 20:38:26 发布

原创最新推荐文章于 2022-09-20 20:38:26 发布 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #css

本文详细解析了line-height和vertical-align:middle在图文混排中实现垂直居中的原理和区别。line-height用于调整一行内容的垂直对齐，而vertical-align则针对行内元素进行对齐。通过结合两者，可以实现图片和文字在同一div中的水平垂直居中。同时，文章提醒注意元素可能存在的默认样式，以确保居中效果。示例代码展示了具体应用。

图文混排时，图片和文字垂直如何居中

首先我们来说一说line-height和vertical:middle的区别
line-height：行高，可以使标签内部一行的内容进行垂直对齐
vertical：middle ：vertical-align:针对行内元素和行内块元素进行居中，设置vertical-align：middle，可以理解为对齐的基线是按照某个中线为基线，实现图片和文字，图片和图片等行内或行内块元素间的居中，但是实际上并未在一行中垂直居中，因为该属性设置是实现一行内元素间的对齐
总结：也就是说设置vertical-align:middle 只是将行内的元素实现某个位置上的对齐，然后再设置line-height就可以使一行里面已经实现某个位置上对齐的内容在整个容器中垂直对齐。
那么在图文混排时要使图片和文字水平垂直居中，line-height和vertical:middle需要一起使用。
例如：
一张图片和一排文字要在一个div中垂直水平居中,给img设置vertical：middle。给父元素设置行高line-height
如果一个元素中包含多个种类要居中的行内块元素，可以分别都先设置vertical：middle，再分别给父元素设置line-height
注意：如果还是没有居中对齐，注意是否元素自身带有默认样式。

div{
width:100px;
height:100px;
line-height:100px}
img{
vertical:middle;}

.head{
            width:1200px ;
            height: 40px;
            margin:0 auto;
             line-height: 40px;
            

        }
  .head ul,.head input,.head img,.head a,.head button{
        vertical-align: middle;
```}