CSS實現字體垂直豎排居中顯示

字體垂直豎排居中顯示，這里有兩種方法，下面我就教大家實現。

HTML：

<ul>
    <li>
        <span>首頁</span>
        <span>HOME</span>
    </li>
    <li>
        <span>關於我們</span>
        <span>ABOUT</span>
    </li>
    <li>
        <span>案例</span>
        <span>CASE</span>
    </li>
    <li>
        <span>資訊</span>
        <span>INFORMATION</span>
    </li>
    <li>
        <span>聯系我們</span>
        <span>CONTACT US</span>
    </li>
</ul>

CSS，方法一：

ul{
    /*去點*/
    list-style: none;
    /*去除偏移*/
    padding: 0px;
    margin: 0px;
}
li{
    border: 1px solid;
    float: left;
    height: 130px;
    
    /*文字居中*/
    text-align: center;
    display: flex;
}
li span{    
    /*文字豎排顯示*/
    writing-mode: vertical-lr;/*從左向右 從右向左是 writing-mode: vertical-rl;*/
    writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl；*/
}

CSS，方法二：

li{
    border: 1px solid;
    float: left;
    height: 130px;
    
    /*文字居中*/
    text-align: center;
    /*display: flex;*/
}
li span{
    /*文字居中*/
    display: inline-block;
    height: 100%;
    /*文字居中*/
    
    /*文字豎排*/
    writing-mode: vertical-lr;/*從左向右 從右向左是 writing-mode: vertical-rl;*/
    writing-mode: tb-lr;/*IE瀏覽器的從左向右 從右向左是 writing-mode: tb-rl；*/
}