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

html-css011

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

1.一般情况，默认的div是写一个换一行，所以每一个div都是新的一行，div默认的display属性是block，把display换成inline就不会换新行了

<div

style="display:inline">XXX</div>

<div

style="display:inline">XXXX</div>

2.使用float:right属性。float做为CSS中的一个属性定义元素向哪个方向浮动。float:right 文本或图像会移至父元素中的右侧。 如下的代码，这里注意一下float属性必须配合width使用，不然的话float属性不起作用

<td class="bg10">

<div style="width:120px

float:right">阅读次数：9999</div>

<div style="width:200px

float:right">发表日期：2009-09-10</div>

</td>

.bg10

{

background-image:url(../images/news_r6_c4.jpg)

height:24px

line-height:24px

color:#939393

}

可以使用弹性布局，display: flex 就可以让div横排，默认布局轴方向就是横向，justify-content: space-between可以是div平均分布在水平轴上。