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元素，只需将align添加到父

即可text-align

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 */
 }

Answer 2

我认为你的问题是你将div设置为中心，但由于它没有宽度或高度，所以它是抽象的。 div正确居中，但它具有无限维度，因此文本保留在其开头，即左上角。

你应该这样做：

.choice {
    color: white;
    background-color: #D8DACF;
    border: 1px solid #cc0000;
    padding: 30px;
    margin-right: auto;
    margin-left: auto;
    color:#F53F39;
    width: 40px;
}

此外，您可以按屏幕百分比选择尺寸，例如

width: 15%;

尝试访问http://w3schools.com/ 它是一个很棒的网站，具有CSS，HTML和javascript的大部分功能，如果你需要

为什么文本不居中？

2 个答案: