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

html-css0176

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

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