html - 为什么文本不居中？

Question

您可以在此处查看代码 - http://jsfiddle.net/tz6tnbub/

这是我的 HTML。

<div class="choice">
<h1>Choose your Semester </h1>
</div>

这是我的 CSS。

.choice {
    color: white;
    background-color: #D8DACF;
    border: 1px solid #cc0000;
    padding: 30px;
    margin-right: auto;
    margin-left: auto;  /*Doesn't work??? Why not?*/
    color:#F53F39;
}

我想做的是将“选择你的学期”居中，我被告知“margin-right:auto”和“margin-left:auto”应该有效。

但事实并非如此，我被卡住了。

请告知哪里出了问题。

Answer 1

h1 作为一个 block 元素，您可以通过简单地将 text-align 添加到 parent< 来对齐/p>

margin:0 auto 适用于具有 fixed width

的元素

.choice {
  color: white;
  background-color: #D8DACF;
  border: 1px solid #cc0000;
  padding: 30px;
  /* margin-right: auto; */ /* remove this */
  /* margin-left: auto; */ /* remove this */
  color: #F53F39;
  text-align: center; /* add this */
 }