主要问题:inline的元素与inline-block的元素在同一行时,总是对不齐(对不齐的原因是inline-block默认值 baseline)
vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默认值:baseline
适用于:内联及 table-cell 元素
解决方案:设置这两个元素的vertical-align:middle来保持中对齐
知识点:display:inline-block 是以块显示在行内。相当于table-cell故vertical-align对其有效果(本来vertical-align只对行内元素有效果),
对vertical-align有效的还有表单各种在行内显示的块(主要特点是他们既能在行内排列又能设置宽高,一般的行内元素不能设置宽高的)
line-height:就是给某个容器或p设置一行的高度
<dt class="art-title">
<span style="vertical-align: middle;">卧室家具</span>
<div class="comdirection-right"></div>
</dt>
css:
.comheader-bottom .articles-block .articles-dropdown .articles .art-brand .art-title {
- float: left;
- font-size: 14px;
- line-height: 14px;//这个在这里也可以不设置,因为没有设置高,
- border: 1px solid red;
}
.comdirection-right {
- display: inline-block;
- width: 24px;
- vertical-align: middle;
- /* display: none; */
- height: 24px;
- background: url(/img/common-icons.png) no-repeat -68px -385px;
}
result:
dt height=100px 里垂直居中,设置line-height很重要,但他的字元素也要同时设置vertical-align:
comheader-bottom .articles-block .articles-dropdown .articles .art-brand .art-title {
- float: left;
- font-size: 14px;
- line-height: 99px;//与height一致
- height: 100px;//与line-height一致
- border: 1px solid red;
}
effect: