如何使文字在div中水平和垂直居中的css代码

如题所述

可以用“text-align”属性和“line-height”属性。

1、新建html文件,在body标签中添加div标签,在div标签输入文字,这里以“演示文本”为例,给div标签设置宽度、高度和背景色属性,属性值分别为200、100和灰色,这时“演示文本”默认位置为div盒子的左上方:

2、这时给div标签添加上“text-align”属性,属性值为“center”,这时文字将会在div容器中水平居中:

3、这时给div标签添加行高“ling-height”属性,属性值为高度的值“100px”,再添加“vertical-align”属性,属性值为“middle”,这时文字将会水平垂直都居中:

温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2017-11-23

水平位置居中可以使用CSS属性text-align来控制

text-align:center; //文本居中

如果需要文字垂直位置居中解决方法一般使用设置文字的行高和父级元素高度一致的办法来做

例如

<style>
.a {
width:500px;
height:80px;
text-align:center;
line-height:80px;
}
</style>
<div class="a">
文字文字文字文字
</div>

本回答被提问者采纳
第2个回答  2016-11-17
text-align: center;水平
line-height:div的高度;垂直
第3个回答  2016-11-17
text-align: center;
vertical-align: middle;