                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

span内写text-align：center 不能让文字居中吗

<!DOCTYPE HTML>

<html>

<head>

<style>

span{

text-align:center;

color:red;

font-size:25px;

}

</style>

</head>

<body>

<ul>

<li><span>我的第一个列表信息</span></li>

</body>

</html>

weibo_骑着小钻风上高架_0

2016-12-24

源自：初识HTML(5)+CSS(3)-升级版 5-7

关注问题我要回答

9422

操作

收起

2 回答

天然卷卷卷
2016-12-25

1 <ul>结束标签漏了。

2 <span>是内联元素，当它在<li>里面的时候，它的属性是内联元素的属性。宽度是根据元素内容定的，不可改变，所以给它设置居中的时候并不会有什么改变（或者可以理解成它仅有内容，没有填充）；将<span>放在<li>外面之后，<li>是块状元素，即“我的第一个列表信息”这一内容是霸占了浏览器这一整行的，当设置<span>的text-align属性为center之后，<li>继承了这一属性，将“我的第一个列表信息”在浏览器这一行居中设置了。