无法使用文本对齐在 CSS 块中居中文本

问题描述

我正在尝试将文字居中显示在我的页面上。除了文本位于屏幕左侧而非中心之外，一切正常。

styling{
     color: white; 
     background-color: aqua;
     font-family: 'Hachi Maru Pop',cursive; 
     font-size: 18px;
     font-weight: bold;
     margin: o auto;
     text-align: center;
  }

解决方法

可能您的文本元素不是 100% 宽。它已经将文本内部居中。

.text {
  background-color: limegreen;
  border: 1px solid green;
  text-align: center;
}

.text--100 {
  display: block;
}

<span class="text">This is not 100%. It's an inline element.</span>
<br />
<br />
<span class="text text--100">This is 100%. Block element fills parent width.</span>
<br />
<br />
<p class="text">Paragraphs are block elements.</p>