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

html-css0120

如何使用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>

这样吧，用浮动：

ul.menu {

display: inline

float: right

margin: 100px 0 0 0

padding: 0 20px 0 0

*zoom: 1

}

ul.menu:after {

clear: both

content: "."

display: block

height: 0

visibility: hidden

display: none

overflow: hidden

}

ul.menu li {

display: inline

margin: 0

padding: 0

float: left

}

------------------------

有问题可以加{border: 1px solid #f00}调试，看边线位置在哪里

这个办法很管用的

margin是间距属性，你可通过对每个对象加margin-left:10px来设定间距，如果要两边对齐，需要在最后一个图片margin-left：0；

也可以每个对象都加margin-left:10px，在给父级别容器加，margin-left：-10px

两种方式可以看情况选择使用