vertical-align居中血案

问题

图片和文字混排，给容器设置了vertical-align不能垂直居中

<div class="container">
  <span class="img"></span> 
  <span class="text-container">
    <span class="main-text">sgss</span>
    <span class="sub-text">dssgssl</span>
  </span>
</div>

.container {
  background: tomato;
  vertical-align: middle;
}
.img {
  display: inline-block;
  background-image: url('http://demos.orionorigin.com/grand-popo/01/wp-content/uploads/2016/10/shield.svg');
  height: 40px;
  width: 40px;
  background-size: cover;
}
.text-container {
  display: inline-block;
}
.main-text, .sub-text {
  display: block;
}

须知原理

1. css boxes

• block box
• line box
• inline-level box

image.png

source

2. vertical-align的作用原理

image.png

• 红色: box border
• 绿色: text-box border
• 蓝色: baseline
  设置vertical-align的值，触发不同的计算，确认text-box中心的摆放位置
  默认是baseline

3. 同一个元素内共享一个baseline

4. vertical-align属性只对line box和inline-level box生效, 且不可继承

5. img的默认摆放规则

img默认摆放也是在baseline，意味着，img的下边界位于baseline

image.png

解决

给.img和.text-container都加上vertical-align: middle.

原因

• 对.img进行vertical-align: middle使.img垂直居中
• 对.text-container进行vertical-align: middle, 使.text-container的中心垂直居中

不能直接对.container进行{ display: inline-block; vertical-align: middle }居中么？

不可以，因为vertical-align不可继承

变种

<div class="container middle">
  <span class="img middle"></span> 
  ssssdfdf
  </div>

.container {
  display: inline-block;
  background: tomato;
}
.img {
  display: inline-block;
  background-image: url('http://demos.orionorigin.com/grand-popo/01/wp-content/uploads/2016/10/shield.svg');
  height: 40px;
  width: 40px;
  background-size: cover;
}
.middle {
  vertical-align: middle;
}

以上是否可行？为何?

source

vertical-align-all-you-need-to-know
what-is-vertical-align