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了。

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中的文字被成功垂直水平居中显示。

使文字在div中水平和垂直居中的的css样式为

text-align:center/*水平居中*/

line-height: 20px/*行距设为与div高度一致*/

示例如下：

HTML元素

<div>水平垂直居中</div>

css样式

div{

width:200pxheight:200px /*设置div的大小*/

border:1px solid green /*边框*/

text-align: center /*文字水平居中对齐*/

line-height: 200px /*设置文字行距等于div的高度*/

overflow:hidden

}

---