主要問題：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: