我的 div class:"title" 似乎没有居中，即使 div 是 margin:auto。我该如何解决？

Question

我将 div 设置为 margin:auto，里面的 h1 应该居中，但事实并非如此。我不知道如何纠正它，我尝试了不同的方法，但其中 none 行得通。请帮忙。它似乎没有居中。

    body {
        background: #5D6D7E;
        color: white;
        font-family: "Varela Round", sans-serif;
        margin: 0;
        padding: 0;
    }

    header {
        background: white;
        color: #3498DB;
    }

    ul {
        list-style-type: none;
    }

    li {
        display: inline-block;
        margin-right: 20px;
    }

    a {
        color: #D7DBDD;
        font-weight: bold;
    }

    a:hover {
        color: white;
    }

    section {
        display: flex;
        flex-direction: row;
    }

    div {
        width: 100px;
        margin: auto;
    }

    .title {
        /* Isn't centered  */
        font-size: 50px;
    }

    header,
    section {
        background: #2E86C1;
    }

    header,
    section,
    footer {
        padding: 20px;
    }

<section>
    <div class="title">
        Brainstorm
    </div>
</section>

Answer 1

问题是您创建了规则 div { width: 100px; }，它将有问题的元素限制为仅 100px width。您的元素确实居中，只是太大而无法适应 100 像素的限制。

删除此规则显示元素按预期居中：

body {
  background: #5D6D7E;
  color: white;
  font-family: "Varela Round", sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background: white;
  color: #3498DB;
}

ul {
  list-style-type: none;
}

li {
  display: inline-block;
  margin-right: 20px;
}

a {
  color: #D7DBDD;
  font-weight: bold;
}

a:hover {
  color: white;
}

section {
  display: flex;
  flex-direction: row;
}

div {
  /*width: 100px;*/
  margin: auto;
}

.title {
  /* Doesn't appear to be center  */
  font-size: 50px;
}

header,
section {
  background: #2E86C1;
}

header,
section,
footer {
  padding: 20px;
}

<section>
  <div class="title">
    Brainstorm
  </div>
</section>

如果您不想为所有 <div> 元素删除此规则（我建议这样做），您也可以简单地在 .title.[=19 上设置 width: auto =]

另请注意，您的问题中有一些无效的 HTML，以及 CSS 中的额外前导 } - 我已在上面更正了这两个问题片段。

Answer 2

添加以下内容CSS。它应该工作

h1{
text-align:center;
}

Answer 3

这有效！

HTML

<section>
  <div class="title">
    Brainstorm
  </div>
</section>

CSS

.title{
  text-align:center;
}

Answer 4

目前每个答案都向您展示了如何在 div 中居中放置文本，但 none 指出您的标记中没有任何标题。

divs没有任何语义，如果你真的想要一个标题那么你也应该使用适当的标题标签：

<section>
  <h1 class="title"> Brainstorm </h1>
</section>

CSS 与 div 相同：

.title {text-align: center}

我的 div class:"title" 似乎没有居中，即使 div 是 margin:auto。我该如何解决？

My div class:"title" doesn't appear to be centered even though div is margin:auto. How do I fix this?

html

css

margin

web