研究vertical-align

by jizhen tan

HTML

<div class="demo">
  <span class='line-box'>
    <img src="https://sfault-avatar.b0.upaiyun.com/344/542/3445428434-5631776c183b2_huge256" alt=""><span>Xx</span>
  </span>
</div>

CSS

.demo {
  background: red;
}
.line-box {
  background: blue;
  line-height: 200px;
}
.line-box img {
  vertical-align: middle;
	/*读者可以自行更改vertical-align属性值： top, text-top, bottom, text-bottom来观察具体的对齐方式 */
  width: 50px;
}
.line-box span {
  margin-left: 20px;
  color: white;
}