css图片、span垂直居中问题

1.图片和span同级时

<div>
<img src="img/hd-logo.png">
<span>标题</span>
</div>


• span设置 vertical-align: middle;
• div设置了高度，则需要 高度=行高

2.只有图片时

<div>
<img src="img/hd-logo.png">
</div>


• img设置 vertical-align: middle;
• div设置了高度，则需要 高度=行高

或者

<div>
<span>
<img src="img/hd-logo.png">
</span>
</div>


• 加一层span，span设置 display: table-cell;vertical-align: middle;
• div设置为display: tabel;height: 200px;

或者

<div>
<img src="img/hd-logo.png">
</div>


• 移动端，大胆的使用flex布局
• div设置 display: flex;align-items: center;