为了账号安全,请及时绑定邮箱和手机立即绑定

关于<span>标签在css中的实现中遇到的问题

我在一个html文档中对<span>和<h1>这两个标签加入了相同的css样式,但为什么被<span>作用的内容不能居中,而被<h1>标签作用的内容可以?以下是我写的代码,请各位大神指点一下,谢谢!

<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8">
      <style type="text/css">
        h1
        {
        font-size:50px;
        color:blue;
        text-align:center;
        }
      </style>
<!--此为css样式-->
      <style type="text/css">
        span
        {
        font-size:50px;
        color:blue;
        text-align:center;
        }
      </style>
      <title>慕课网</title>
   </head>
   <body>
      <h1>蓝色居中</h1>
      <span>蓝色居中</span>

</body>

</html>


正在回答

1 回答

span是行内元素,默认是display:inline;  你想让span居中,需要把他设置为display: block;以块状显示。(加到css里),然后保存刷新你就可以看到居中啦。

1 回复 有任何疑惑可以回复我~
#1

南方的大雁 提问者

非常感谢!
2017-02-14 回复 有任何疑惑可以回复我~
#2

南方的大雁 提问者

请问display:inline是什么意思?还有display: block;事什么意思?css对行内元素有什么限制吗? 谢谢!
2017-02-14 回复 有任何疑惑可以回复我~
#3

机智的云游君 回复 南方的大雁 提问者

display:inline;你就可以看成他自身就是一行啦,自己根据自己的长短居中当然就没效果了。变成block就是占据一整行的块,他可以根据浏览器一整行(实际上是上一层父级元素,因为你没写其他东西,所以直接就是body是父级元素)居中,所以就能显示在页面中央。
2017-02-14 回复 有任何疑惑可以回复我~
#4

南方的大雁 提问者 回复 机智的云游君

谢谢,看来自己还是有太多的东西要学啊
2017-02-15 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消

关于<span>标签在css中的实现中遇到的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信