介绍写入方式:horizontal-tb;//默认:水平方向,从上到下,
写入方式:vertical-rl;,,//垂直方向,从右向左
写入方式:vertical-lr;,,//垂直方向,从左向右演示 & lt; ! DOCTYPE html>
& lt; html>
,,,& lt; head>
,,,,,,,& lt; meta charset=皍tf-8"比;
,,,,,,,& lt; title> CSS文字垂直排列& lt;/title>
,,,,,,,& lt; style 类型=拔谋?css"比;
,,,,,,,,,,,div {
,,,,,,,,,,,,,,,边界:,1 px solid lightblue;
,,,,,,,,,,,,,,,填充:,5 px;
,,,,,,,,,,,}
,,,,,,,,,,,.vertical-text {
,,,,,,,,,,,,,,,-webkit-writing-mode:, vertical-rl;
,,,,,,,,,,,,,,,写入方式:,vertical-rl;
,,,,,,,,,,,}
,,,,,,,& lt;/style>
,,,& lt;/head>
,,,& lt; body>
,,,,,,,& lt; div 类=皏ertical-text"比;
,,,,,,,,,,,1只文字垂直排列,& lt; br /比;
,,,,,,,,,,,2只文字垂直排列
,,,,,,,& lt;/div>
,,,& lt;/body>
& lt;/html> & lt; ! DOCTYPE html>
& lt; html>
,,,& lt; head>
,,,,,,,& lt; meta charset=皍tf-8"比;
,,,,,,,& lt; title> CSS3 图片垂直居中& lt;/title>
,,,,,,,& lt; style 类型=拔谋?css"比;
,,,,,,,,,,,div {
,,,,,,,,,,,,,,,边界:,1 px solid lightblue;
,,,,,,,,,,,,,,,填充:,5 px;
,,,,,,,,,,,,,,,身高:,500 px;
,,,,,,,,,,,}
,,,,,,,,,,,.vertical-img {
,,,,,,,,,,,,,,,-webkit-writing-mode:, vertical-rl;
,,,,,,,,,,,,,,,-ms-writing-mode:, bt-rl;
,,,,,,,,,,,,,,,写入方式:,vertical-rl;
,,,,,,,,,,,,,,,text-align:,中心;
,,,,,,,,,,,}
,,,,,,,& lt;/style>
,,,& lt;/head>
,,,& lt; body>
,,,,,,,& lt; div 类=皏ertical-img"比;
,,,,,,,,,,,,& lt; https://www.yisu.com/zixun/img src=" 1. jpg "/>
本篇文章给大家分享的是有关怎么在CSS3中实现文本垂直排列,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
<强> 1.0 CSS3标准
<强> 2.0 IE中
由于历史的原因,即下该属性值则显得尤为复杂:
-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl |结核病
具体可以查看官方文档:https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/
<强> 3.0一些应用
<强> 3.1垂直居中
通过对这个属性的使用,我们可以结合text-align:中心实现垂直居中或者使用保证金:汽车。