问题
图片和文字混排，给容器设置了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
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;
}
以上是否可行？为何?
