文本对齐在 CSS 中不起作用答案

【问题标题】：Text-align not working in CSS文本对齐在 CSS 中不起作用
【发布时间】：2017-11-01 21:40:04
【问题描述】：

所以我想弄清楚为什么 text-align 在这段代码中不起作用。我认为这是 Sublime Text 3 的问题。每当我尝试在浏览器中打开时，对齐都不正确。

我的代码如下所示：

.center {
  text-align: center;
}

#red {
  color: red;
}

#blue {
  color: blue;
}

#green {
  color: green;
}

.big {
  font-size: 300%;
}

.small {
  font-size: 30%;
}

#bold {}

<!-- Center -->
<h1 class="center">The Wonders of CSS!</h1>
<hr>
<h2>Fun With Text!</h2>
<!-- Change text color -->
<p id="red">This text is red.</p>
<p id="blue">This text is blue.</p>
<p id="green">This text is green.</p>
<!-- Change font-size -->
<p class="big">This text is BIG!</p>
<p class="small">This text is tiny...</p>
<!-- Center -->
<p class="center">~~This text is centered~~</p>
<!-- Bold -->
<p id="bold">If we have something important to say, we can make it bold!</p>
<!-- Change font -->
<p id="font">We can even change our font-family if we are feeling creative!</p>

我可以在 Sublime Text 中解决这个问题吗？我要买东西吗？（叹气）

【问题讨论】：

一切正常
style.css中不需要标签
如果您在浏览器中右键单击This text is centered 并转到“检查元素”，是否显示正在应用text-align: center;？如果您在 Chrome 中查看该页面并进行硬刷新 (CTRL + F5)，问题是否已解决？
我尝试进行硬刷新，甚至重新启动 Chrome。没有任何效果。
尝试添加屏幕截图但不能。基本上是“CSS 的奇迹！”和“~~This text is centered~~”都仍然左对齐。

标签： html css sublimetext

【解决方案1】：

您的.centerselector 确实将应用了类的元素居中。

不要忘记，为了集中其他元素，您还需要对它们应用 .center 类（例如，<p id="red" class="center>）。

CSS caching 问题也可能导致您的 CSS 更改无法正确反映。为了解决这个问题，请确保您已使用 CTRL + F5 重新加载 CSS 文件，并在单击刷新图标时按住 SHIFT 刷新 CSS 缓存。

.center {
  text-align: center;
}

#red {
  color: red;
}

#blue {
  color: blue;
}

#green {
  color: green;
}

.big {
  font-size: 300%;
}

.small {
  font-size: 30%;
}

<body>

  <!-- Center -->
  <h1 class="center">The Wonders of CSS!</h1>

  <hr>

  <h2>Fun With Text!</h2>

  <!-- Change text color -->
  <p id="red">This text is red.</p>
  <p id="blue">This text is blue.</p>
  <p id="green">This text is green.</p>

  <!-- Change font-size -->
  <p class="big">This text is BIG!</p>
  <p class="small">This text is tiny...</p>

  <!-- Center -->
  <p class="center">~~This text is centered~~</p>

  <!-- Bold -->
  <p id="bold">If we have something important to say, we can make it bold!</p>

  <!-- Change font -->
  <p id="font">We can even change our font-family if we are feeling creative!</p>

</body>

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

您的课程应该可以正常工作，它确实使您的文本居中。但是，div 可能只有文本那么大。尝试给.text-center 类一个width: 100%;

【讨论】：