css怎样实现竖向文字居中
竖向文字可以使用writing-mode:vertical-lr;实现,居中显示,我们可以设置元素为flex弹性盒子布局,然后设置元素在主轴上居中显示即可。
Document
.wordWrapClass{
width: 200px;
height: 200px;
border: 1px solid red;
/*垂直方向文字*/
writing-mode: vertical-rl;
/*居中文字*/
text-align: center;
display:flex;
flex-direction:column;
justify-content:center;
}
竖向居中文字
属性定义及使用说明
writing-mode 属性定义了文本在水平或垂直方向上如何排布。
语法格式如下:writing-mode:horizontal-tb vertical-rl vertical-lr sideways-rl sideways-lr
horizontal-tb:水平方向自上而下的书写方式。即left-right-top-bottom
vertical-rl:垂直方向自右而左的书写方式。即top-bottom-right-left
vertical-lr:垂直方向内内容从上到下,水平方向从左到右
sideways-rl:内容垂直方向从上到下排列
sideways-lr:内容垂直方向从下到上排列
更多CSS相关技术文章,请访问CSS3答疑栏目进行学习!