CSS实现图片与文本的居中对齐的常见方式

1.为图片和文本都设置vertical-align：middle

<style>.d1>* {vertical-align: middle;}</style><div class='d1'><img src='./1.jpg' width='100'/><span>这是一段文本</span></div>

2.通过弹性布局实现，外层容器设置弹性布局，通过align-items: middle设置交叉轴居中对齐

<style>.d1 {display: flex;align-items: center;//对齐justify-content: center;//居中}</style><div class='d1'><img src='./1.jpg' width='100'/><span>这是一段文本</span></div>

3.借助于背景图片实现，这时只需要文本居中即可

<style>.d1 {height: 133px;background: url(./1.jpg) 0 0 no-repeat;background-size: 100px 133px;padding-left: 100px;line-height: 133px;}</style><div class='d1'><!--<img src='./1.jpg' width='100'/>--><span>这是一段文本</span></div>

4.图片与文本左浮动，同时设置容器元素的line-height

<style>.d1 *{float: left;}.d1 span {line-height: 133px;}</style><div class='d1'><img src='./1.jpg' width='100' height='133'/><span>这是一段文本</span></div>

5.文本设置为行内块，图片垂直居中对齐

<style>.d1 img {vertical-align: middle;margin-top:-10px;//看情况加不加}.d1 span {display: inline-block;}</style><div class='d1'><img src='./1.jpg' width='100' height='133'/><span>这是一段文本</span></div>