html怎么让浮动的文字居中显示

html-css018

html怎么让浮动的文字居中显示,第1张

1，文字外层，放个div,div加个样式，

<div class="text">这里是想要居中的文字</div>,

2样式表里这样写：

.text{text-align:center}

<div class="text" style=" text-align:center">这里是想要居中的文字</div>

写了两个例子，一个是利用这个line-height属性，一个是利用padding来设置，都达到了垂直居中的效果

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>垂直居中</title>

</head>

<style>

*{padding:0margin: 0}

    p span{float:left}

    p{height:100pxline-height:100pxfont-size:25pxborder:1px solid redtext-align:center}

    div span{float:leftheight:100pxpadding:30px 0pxfont-size:25px}

    div{height:100pxborder:1px solid red}

</style>

<body>

    <p><span>第一个文本<span></p>

        <div><span>第二个文本<span></div>

</body>

</html>

给里面盒子一个宽度然后通过margin:auto让他居中

举例

<div style="float:leftwidth:50%">第一个盒子（左）

<div style="width:50pxheight:30pxmargin:auto">里面的盒子</div>

</div>

<div style="float:rightwidth:50%">第二个盒子（右）</div>