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

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

首先我们来说一说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;
```}