一个DIV里面的文字如何上下左右居中显示
通过css中的text-align属性和line-height属性可以设置div内的文字上下左右居中显示。下面小编举例讲解一个DIV里面的文字如何上下左右居中显示。
东西/原料
- html+css
- 代码编纂器：Dreamweaver CS5
方式/步调
- 1
新建一个html文件，定名为test.html，用于讲解一个DIV里面的文字若何上下摆布居中显示。
- 2
在test.html文件内，利用div标签建立一行文字，文字内容为“这是测试的文字”。
- 3
在test.html文件内，设置div的id属性为mycss，本家儿要用于下面经由过程该id来设置css样式。
- 4
在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内。
- 5
在css标签中，经由过程id（mycss）设置div的样式，利用width属性设置div的宽度为280px，利用height属性设置div的高度为180px，同时，利用background属性设置div的布景颜色为灰色。
- 6
在css标签中，将text-align属性设置为center，实现文字的程度居中，将line-height属性设置为180px(与height的高度相等)，实现文字的垂直居中。
- 7
在浏览器打开test.html文件，查看实现的结果。
总结：
- 1
1、建立一个test.html文件。
2、在文件内，利用div标签建立一行文字。
3、在css标签中，经由过程id（mycss）设置div的样式，利用width属性设置div的宽度为280px，利用height属性设置div的高度为180px。
4、在css标签中，将text-align属性设置为center，实现文字的程度居中，将line-height属性设置为180px(与height的高度相等)，实现文字的垂直居中。
注重事项
- line-height的高度值必需与div的高度值相等。
- 发表于 2020-01-10 17:00
- 阅读 ( 1544 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章