前端中如何使span中的文字居中

Posted 2023-05-08

参考技术A

要想居中，首先得有宽度；

而span是inline，给width是不起作用的；要想起作用，得先让span变成 inline-block；

spandisplay:inline-block;width:100px;text-align:center;

设置文字居中显示的三句代码

.middle-boxdisplay: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 auto; position:relative;

.middle-innerdisplay: table-cell; vertical-align:middle; *position:absolute; *top:50%; *left:50%; width:100%; text-align:center;  //用了css的hack，对ie6,ie7的兼容

.middle-inner pposition:relative; *top:-50%; *left:-50%;

<div class="middle-box">

<div class="middle-inner">

<p><span class="suc-tip">专注前端开发和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>

</div>

</div>

参考技术B 　　span中的文字居中？
　　要想居中，首先得有宽度；
　　而span是inline，给width是不起作用的；要想起作用，得先让span变成 inline-block；
　　spandisplay:inline-block;width:100px;text-align:center;

固定容器高度的多行文字垂直居中

思路：把文字用span包裹起来，设置为inline-block，相当于图片img的属性。父div用table-cell的样式，用vertical-align:middle实习上下居中

<div class="box">
            <span>多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中多行文本居中</span>
</div>

.box{width:400px;height:500px;border: 3px solid #333;padding: 0 10px;display:table-cell;vertical-align:middle;}
.box span{display: inline-block;}

使用这方法需要注意的一点是外部div不能使用浮动或者绝对定位。