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

html-css016

如何使用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让三个标签横排显示或者三个以上的标签横排,其实都是一样的,下面演示一下,通过控制li标签实现横排显示;

1、打开所需测试的软件,创建一个新的html

2、写入要实现效果的代码:

3、利用css来控制横排展示;

4、展示的效果为:

详解css:主要是控制li标签的靠左浮动:float:left;当然,展示在一排,靠右浮动也是可以的,list-style-type:none意思是:去除图2展示的前面的点;至于margi-right:20px;让li标签与右侧外边距离为20px