css中文字居中对齐的问题

html-css04

css中文字居中对齐的问题,第1张

margin是盒子的外边距margin:auto就是盒子自动对齐

文字横向居中是text-align:center

文字的垂直居中是高度等于行高,但前提是只有一行

如:height:30pxline-height:30px

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:p {text-align: center}。

3、浏览器运行index.html页面,此时p标签内的文字成功被水平居中显示。

1、可以用text-align属性设置。首先打开hbuilder编辑器,新建一个html文件,先切换到边改边看模式:

2、写一个div出来,同时在内部加上一些文字,使用css增加属性,使得div的区域看得清楚:

3、接下来就使用text-align的center属性将文字横向居中,同时设置行高,使这行文字实际占用的高度和div高度相同,就产生了居中效果:

4、如果是多行文字,需要配合行内标签p和它的padding属性来完成居中,以上就是css设置div文字居中的演示: