Question

我的网站中有span个标记。

我想将页眉的文本对齐在页面的中心。

<span id="notice">Please Read the notice</span>

我正在使用CSS进行下面的操作。

#notice{
     color:#D05679;
     font-family: Signika; 
     font-size:15px;
     text-align:center;

   }

但这不起作用。请建议。

PS：谢谢大家的答案。他们都工作。我犯了一个愚蠢的错误。

Answer 1

试试这个..

＆＃13;

#notice{
     color:#D05679;
     font-family: Signika; 
     font-size:15px;
     text-align:center;
}

＆＃13;

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<div id="notice">
    <span >Please Read the notice</span>
</div>
</body>
</html>

＆＃13;

Answer 2

text-align会影响元素内的文本但是默认情况下span是一个内联元素，因此只有它的内容宽。因此，当span 中的文本以为中心时，您无法分辨，因为span只与文本一样宽。

所以这里的解决方案只是将text-align:center添加到父元素...而不是span。

body {
  text-align:center;
  }

<span id="notice">Please Read the notice</span>

Answer 3

将display：block添加到CSS。

#notice{
 color:#D05679;
 font-family: Signika; 
 font-size:15px;
 text-align:center;
 display:block;
}

解释：text-align: center将跨度的内容置于跨度的边界内。但是，默认情况下，span元素只与其内容一样宽：

|content|

默认情况下，div和p等其他元素会占用可用的全部宽度：

|content                                                                                  |

区别在于span设置为display:inline，而div和p设置为display:block。

Answer 4

像这样更改您的代码

<div id="notice">
<span >Please Read the notice</span>
</div>

Answer 5

SPAN不是块元素，因此，默认情况下，它不能用于对齐文本。你可以，在上面： - 设置display：block，它将占用100％的宽度，然后将工作text-align：center - 设置显示：内联块;和保证金：0自动;在这种情况下，SPAN将与内容相同，但将按页面中心对齐。这取决于你的布局。

Answer 6

使用风格可能对你有用

#notice{
    color:#D05679;
    font-family: Signika; 
    font-size:15px;
    text-align:center;
    display:block;
    margin:0px auto;
    text-align:center;
   }

Answer 7

这里是Working Fiddle和 CSS

#notice{
     color:#D05679;
     font-family: Signika; 
     font-size:15px;
     text-align:center;
     display: block;

   }

Answer 8

尝试这个：

＆＃13;

span {
  text-align: center;
  display: block;
}

＆＃13;

<!DOCTYPE HTML>
<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Test</title>

</head>

<body>

  <span>Please Read the notice</span>


</body>

</html>

＆＃13;

Answer 9

您可以使用flexbox属性。

HTML

<div id="notice">
<div>Please Read the notice</div>
</div>

CSS：

#notice {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%
}

#notice > div {
  flex: 0 0 auto;
}

有关详细信息，请参阅此链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在页面中心对齐跨度文本

9 个答案: