vertical-align百分比是相对于line-height值计算的
{ line-height: 30px; vertical-align: -10%; }
{ line-height: 30px; vertical-align: -3px; /* 30px * -10% */ }
{ line-height: 30px; vertical-align: -10%; }
{ line-height: 30px; vertical-align: -3px; /* 30px * -10% */ }
随意一个标签,里面有个妹纸~
vertical-align与line-height实际上已经在一起搞基了~
vertical-align与line-height实际上已经在一起搞基了~
vertical-align: baseline; line-height: 1.5; font-size: 24px;
vertical-align: baseline; line-height: 1.5; font-size: 24px;
对vertical-align或者line-height下药即可!
vertical-align: baseline; line-height: 1.5; font-size: 24px;
1. 消灭vertical-align
vertical-align: baseline; line-height: 1.5; font-size: 24px;
display: block; margin: auto;
vertical-align: baseline; line-height: 1.5; font-size: 24px;
2. 改变vertical-align
vertical-align: baseline; line-height: 1.5; font-size: 24px;
3. 改变line-height
IE7+
<p><img src="mm1.jpg"></p>
<p><img src="mm1.jpg"><!-- 这里要折行或空格 -->
</p>
text-align:justify任意数目列表两端对齐效果
.justify-fix { display: inline-block; width: 250px; }
<p style="text-align: justify;">
<img src="img/mm1.jpg" width="250">
<img src="img/mm1.jpg" width="250">
<img src="img/mm1.jpg" width="250">
<img src="img/mm1.jpg" width="250">
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
</p>
这是什么鬼?
CSS2的可视化格式模型文档:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
'inline-block'的基线是正常流中最后一个line box的基线, 除非,这个line box里面既没有line boxes或者本身'overflow'属性的计算值而不是'visible', 这种情况下基线是margin底边缘。
.dib-baseline { display: inline-block; width: 150px; height: 150px; border: 1px solid #cad5eb; background-color: #f0f3f9; }
<span class="dib-baseline"></span> <span class="dib-baseline">x-baseline</span>
x-baseline
行高变0
xx