何如让文字跟图片垂直居中对齐

Question

如图所以。文字用的是spanlai来包裹。怎么做到图片和文字垂直居中。这图片上看着还居中，到手机上，有的就居中，有的文字就偏上。我的做法是给图片设置vertical-alian:middle。给文字也这样设置，但还是无法做到垂直居中，大家一般怎么处理这种小图片和文字混杂，垂直居中对齐的？
ps:我给外面的div设置了line-height了，但是没乱用啊

Answer 1

1.flex布局

/*你的父容器*/
 .box{
        display:flex;
        align-items: center;//子元素垂直居中
        justify-content: center;//子元素水平居中
}

2.table布局

 .box{
        display:table;
       vertical-alian:middle;
}

Answer 2

1.来点花的吧:after占位

<div class="box">
            <img src="img/451e0f1.png"/>1111111
</div>

.box{
  height: 400px;
}
.box:after{
   content:'';
   width:0;
   height:100%;
   display:inline-block;
   vertical-align:middle;
}

img{
   vertical-align:middle;
   display:inline-block;
}

2.display:inline-block

    .ul2 li{    
        display: inline-block;
        *display: inline;                        
        vertical-align: middle;
    }
    .ul2 li img{
        vertical-align: middle;
    }
    <div class="box">
            <ul class="ul2">
                <li><img src="img/451e0f1.png"/>1111</li>
                <li><img src="img/4caa0aa.png"></li>
                <li><img src="img/123.jpg"></li>
                <li><img src="img/2e0f7f7.png"/></li>
            </ul>
        </div>

3.display:table-cell

.ul1 li{            
        display: table-cell;
        vertical-align: middle;            
    }
.ul1 li img{
        vertical-align: middle;
    }
    <div class="box">
            <ul class="ul1">
                <li><img src="img/451e0f1.png"/>11111</li>            
            </ul>
        </div>

4.display:flex，有人说了
5.display:table

Answer 3

给图片和文字外包裹的<span>元素同时设置vertical-alian:middle，display:inline-block,

Answer 4

文字要用line-height居中啊，圖片采用bertical-align:middle呢

Answer 5

line-height：为你外边包裹盒子的高度;
vertical-alian:middle;

Answer 6

用背景图写啊。。。。。