如何使用DIV+css 实现文字横排居中 并且有间距

html-css08

如何使用DIV+css 实现文字横排居中 并且有间距,第1张

使用DIV+css 实现文字横排居中 并且有间距，首先文字需要有个块级元素包裹着，然后设定一定的宽度和高度，文字居中，css中有个text-align这个属性，设置成center，文字就是相对容器的宽度是居中的，请看代码：

<html>

<head>

<style>

#div1{

width:600px

height:40px

font-size:13px

}

#div1 p{

display:block

width:300px

height:30px

text-align:center

margin:0 auto

}

</head>

<body>

<div id='div1'>

<p>我是测试文字</p>

</div>

</body>

</html>

使用css的margin属性设置。

1、首先打开hbuilder软件，新建一个html文件，在html里面写入html结构，在给每个子div设置一个class属性。2、接着在上方的style标签中设置这个名叫div的class的css样式，这里把文字字号放大并加入了边框，然后就可以使用margin属性设置子容器之间的间距了，margin中前面的是设置上下间距，后面的则是左右间距，最后根据自己的需要设置即可。3、来到浏览器即可看到效果，三个div的间距都是20px。以上就是cs设置div子容器之间的间距的方法。