text-align:center写在span内为什么不能让居中
原因
是内联元素,当它在
里面的时候,它的属性是内联元素的属性。宽度是根据内容定的,不可改变,所以给它设置文字居中不会有什么改变(或者可以理解为它仅有内容,没有填充);在
外面的
中设置text-align:center让文字居中可以,因为
是一个块元素,霸占了浏览器的这一整行,有宽度,可以让文字水平居中。例以下代码:
<style>
.box{
height: 200px;
width: 200px;
background-color: chartreuse;
text-align: center;
}
.box span {
/* margin-left: 100px; */
/* text-align: center; */
color: coral;
}
</style>
</head>
<body>
<div class="box">
<span>123</span>
</div>
</body>
margin:o auto 也不能在内联元素中使用,因为内联元素宽度是由内容多少决定的,auto不能设置水平居中。但margin设置左右可以使用,要想上下也有反映的话,可将内联转化为块状元素。
padding对于内联元素左右也有效果。