html中如何让span的文字居中_随笔

你好，

首先你的body要有宽高，一般是100%，

每个span标签分散着是不方便布局的，所以你可以用一个div盒子包裹住所有的div，然后将该盒子居中就行了。

居中有很多办法，最简单就用margin:0 auto前提是要有宽高。

span是行元素，你需要把它转化成块元素，才能使宽生效，居中生效

<!DOCTYPE html>

<head>

<title>span居中</title>

span{

background: #ccc

color: white

}

</style>

</head>

<body>

<span style="width:100%text-align:centerdisplay:block">span居中</span>

</body>

</html>

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用p标签创建一行文字，并在p标签内添加span标签。

3、在test.html文件内，设置p标签的class属性为mycss。

4、在css标签内，通过class设置p标签的样式，设置它的背景颜色为灰色，宽度为200px，高度为50px。

5、在css标签内，再使用line-height属性设置p标签内容的行高，该行高与p标签的高度相同，便可以实现垂直方向居中对齐。

欢迎分享，转载请注明来源：内存溢出

html中如何让span的文字居中