css之 字体垂直排布

 

实现字体垂直排布，上下左右居中

html：

<div class="input_btn">
    立即匹配
</div>

css：

.input_btn{
	width:0.94rem;
	height:1.56rem;
	text-align: center;
	line-height: 0.94rem;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	font-size:0.22rem;
	color:rgba(255,255,255,1);
	background:rgba(76,158,255,1);
	border-radius:0 0.08rem 0.08rem 0;
}	

实现属性说明：

writing-mode：vertical-rl；让字体垂直排布

text-align：center；垂直居中

line-height：0.94rem：水平居中

原理：writing-mode：vertical-rl；属性将水平/垂直轴转换；

 

微信公号搜索：李大头头。（或扫描二维码）找我来玩。

更多【前端技术群】和【内推职位】 资源等着你。

还不定期在公众号请大家喝奶茶！

想与我聊聊或者有什么问题都可以在公众号找到我。

等你哟~