php竖向居中代码,css怎样实现竖向文字居中

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答疑栏目进行学习！