HTML中如何设置文本垂直靠下对齐_随笔

①：设置行高line-height=容器的高度-文字的大小/2，这个时候元素在垂直方向上就会出现在你的容器的中间,比如，1个div的高度是100个像素，文字的大小是20px，那末你设置div的line-height的值为90px便可。同理要是你想文字在底部出现，那末设置为190px。②：设置1下padding-top属性，通过这个属性你就能够控制你的文字和容器顶部的距离。容器的实际高度是padding-top+height，你应当知道。这么理解，本来我的父容器是想设置为100px的，如果我想文字在垂直方向的中间，那末容器的1半就是50px，由于我文字本身的大小是20px的，所以文字的中间距离容器顶部应当是100px/2⑵0px/2=40px，现在容器的高度实际上变成了100px+40px，所以我把高度设置为100px⑷0px，那末容器的高度就保证为100px了。

设置CSS样式，writing-mode属性

兼容谷歌、火狐等浏览器（测试以后IE暂不兼容）:

writing-mode:vertical-rl//垂直方向，从右到左

writing-mode:vertical-lr//垂直方向，从左到右

IE私有属性（其他浏览器不兼容）：

writing-mode:lr-tb//默认，从左到右，从上到下。

writing-mode:tb-rl//从上到下，从右到左。

writing-mode:tb-lr//水平方向，从上到下，从左到右。

代码实例：

<!DOCTYPE html>

<head>

<title>言成科技-文字竖排实例</title>

.box1 { writing-mode: vertical-rl }

.box2 { writing-mode: vertical-lr }

.box3 { writing-mode: lr-tb }

.box4 { writing-mode: tb-rl }

.box5 { writing-mode: tb-lr }

</style>

</head>

<body>

<div class="box1">提供高品质教育服务让每个人遇到更好的自己</div>

<div class="box2">提供高品质教育服务让每个人遇到更好的自己</div>

<div class="box3">提供高品质教育服务让每个人遇到更好的自己</div>

<div class="box4">提供高品质教育服务让每个人遇到更好的自己</div>

<div class="box5">提供高品质教育服务让每个人遇到更好的自己</div>

</body>

</html>

Tips：经过测试，vertical-rl、vertical-lr兼容谷歌火狐等浏览器，lr-tb只兼容ie7及以下浏览器，tb-rl、tb-lr只兼容IE8及以上浏览器。

2.设置CSS样式，固定宽度

对当前元素设置固定宽度，当文字一行容纳不下两个字时，文字自动换行，就形成了文字竖排。

代码实例：

<!DOCTYPE html>

<head>

<title>言成科技-文字竖排实例</title>

.box {

width: 20px

line-height: 18px

}

</style>

</head>

<body>

<div class="box">提供高品质教育服务让每个人遇到更好的自己</div>

</body>

</html>

3.添加HTML的br标签

利用br标签换行的属性，实现文字竖排需求。

代码实例：

<!DOCTYPE html>

<head>

<title>言成科技-文字竖排实例</title>

</head>

<body>

</body>

</html>

了解更多文字处理方式：《jQuery特效实战开发》

1、在html编辑器中，新建一个html文件，例如：index.html。

2、在index.html中的body标签中，填入html代码：

<div style="position: absolutetop: 50%left: 50%height: 10%width: 30%margin: -5% 0 0 -15%">123asfafada</div>

3、最后，浏览器运行index.html，此时html中的文字被成功垂直水平居中显示。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7486583.html

HTML中如何设置文本垂直靠下对齐

发表评论

评论列表（0条）