CSS篇之巧用line-height

公司一個頁面中的一個樣式以下，使左邊文字豎直排列且水平垂直居中：

代碼：

<div class='left-tit'>已停止</div>

.left-tit{
    width: 30px;
    height: 158px;
    border-radius: 5px 0 0 5px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    letter-spacing: 4px;
    background: #eb5c5e;
    padding-top: 50px;
    padding-left: 5px;
}

通常狀況，我會用padding（如上）或者用position+transform+margin使文字豎直排放看起來居中，可是這樣不夠智能或顯得比較冗餘。

偶然發現，其實用line-height就能不用具體控制padding數值，也不用多加代碼而完美實現。
改善代碼以下:

<div class='left-tit'>
    <span>已停止</span>
</div>

.left-tit{
    width: 30px;
    line-height: 158px;
    border-radius: 5px 0 0 5px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #eb5c5e;
}
.left-tit span{
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
    width: 14px;
}

主要:設置外層line-height及內部span爲inline-block；兩點結合真的是挺巧妙的，line-height撐開盒子高度並保證文字垂直居中， inline-block使得元素具備內聯元素特性而水平居中，同時又具備塊級元素的特性可以設置寬度。