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，⽅法⼆：
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；*/
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。