display:inline-block 与 vertical-align和line-height的关系

主要问题：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 {

1. float: left;
2. font-size: 14px;
3. line-height: 14px;//这个在这里也可以不设置，因为没有设置高，
4. border: 1px solid red;

}

 

 

.comdirection-right {

1. display: inline-block;
2. width: 24px;
3. vertical-align: middle;
4. /* display: none; */
5. height: 24px;
6. 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 {

1. float: left;
2. font-size: 14px;
3. line-height: 99px;//与height一致
4. height: 100px;//与line-height一致
5. border: 1px solid red;

}

 

effect: