部门中的中心项目（CSS）

Question

我是学习Web开发的新手，并且对如何在div中将项目居中有疑问。我想知道为什么我们设置“ text-align：center”来将div中所有a-tag项居中，而不是在标签中设置text-align？

<div>
  <a href="">ONE</a>
  <a href="">TWO</a>
  <a href="">THREE</a>
  <a href="">FOUR</a>
  <a href="">FIVE</a>

* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

div {
  background-color: #ffa;
  text-align:center; //correct one
}

div a {
  padding: 10px;
  border: 1px #aaa solid;
  font-size: 1.5em;
  display:inline-block;
  text-align:center; // wrong one
}

Answer 1

Amy，之所以这样，是因为没有p标签将链接中的文本包裹起来。这意味着即使您要包括text-align：center;作为p标签的样式，它不适用于该文本。

Answer 2

没有P标签。所以您可以使用div标签，我认为。如果要使P标签居中，则必须调整样式属性'display：inline-block'或'display：inline'。因为P标签是一个块元素。基本上，所有块元素都有父母的宽度。因此您不能使'100％width'元素居中。

Answer 3

首先<p>中没有<div>标记，因此div p {}的CSS将不起作用。现在，如果您使用过：

div **a** {
  padding: 10px;
  border: 1px #aaa solid;
  font-size: 1.5em;
  display: inline-block;
  text-align: center;
} 

它将CSS应用于您的HTML，但是，它仍不会将div中的项目居中-将[[only将文本居中在<a>元素内。这就是为什么要在较大容器<div>中居中放置项目的原因，可以将text-align：center应用于父容器<div>;

div {
  background-color: #ffa;
  text-align: center;
}

Answer 4

正如Samuel指出的，您首先需要关闭div。除此之外，display标签的默认<a>属性是inline。因此，您的代码将它们对齐，并在父div中居中。

如果要堆叠它们，则需要设置display:block。

请注意，默认情况下，宽度为父div的100％。如果您不希望这些margin:auto标签从父级的左边移到右边，请设置一个特定的宽度和<a>。

此处查看所有示例：https://jsfiddle.net/82hnvpg9/

附带说明，//不是向CSS添加注释的正确方法。请改用/* Comment */。