2016 - 2024

感恩一路有你

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

浏览量:2055 时间:2021-03-15 15:50:23 作者:admin

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

一个比较简单的方法就是这样:你们假设你的DIV是高度100PX,宽度是1000PX,那你这样写,你的文字就会水平垂直居中:<divstyle="width:1000pxheight:100pxtext-align:centerline-height:100pxborder:bluesolid1px">水平垂直居中</div>CSS是这样的,text-align:center意思就是说,让这个DIV里的文字水平居中,而line-height:100px的意思是说,让DIV里面的每一行文字,占的高度为100PX(和那个DIV的高度一样),这样,文字就垂直居中了。也就是说,如果你的DIV是200PX高,那你就让line-height:200px文字就会垂直居中了。不知道说明白没有。不行,你再HI我好了。

如何使文字在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”,这时文字将会水平垂直都居中:

css水平居中和垂直居中 div水平居中的方法 div文字垂直居中

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。