部门中的中心项目 (CSS)

Question

我是学习网络开发的新手，并且有一个关于如何将项目置于 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>

</div>

* {

  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

正如塞缪尔指出的，您首先需要关闭您的 div。除此之外，标签display的默认属性是。因此，您的代码会将它们排列起来，并将它们置于父 div 的中心。<a>inline如果你想将它们堆叠起来，你需要设置display:block.请注意，默认情况下宽度将为父 div 的 100%。margin:auto如果您不希望这些<a>标签从父级的左侧移动到右侧，请设置特定的宽度。请参阅此处的所有示例：https ://jsfiddle.net/82hnvpg9/顺便说一句，//这不是向 CSS 添加注释的正确方法。/* Comment */代替使用。

Answer 2

没有 p 标签。所以我认为你可以使用 div 标签。如果你想让p标签居中，你必须调整style属性display:&nbsp;inline-block或者display:inline因为p标签是一个块元素。基本上，所有块元素都有父元素的宽度。所以你不能让“100%宽度”元素居中。

Answer 3

艾米，原因是因为您的链接中没有包含文本的 p 标签。这意味着即使您要包含 text-align: center;&nbsp;作为 p 标签的样式，它不适用于该文本。

Answer 4

首先，<p>中没有标签，<div>因此 div p { } 的 CSS 不起作用。现在，如果您使用：div **a** {&nbsp; padding: 10px;&nbsp; border: 1px #aaa solid;&nbsp; font-size: 1.5em;&nbsp; display: inline-block;&nbsp; text-align: center;}&nbsp;它会将 CSS 应用于您的 HTML，但是，它仍然不会将 div 中的项目居中 - 它只会将元素内的文本居中<a>。这就是为什么为了将容器内的项目居中，您可以将 text-align: center 应用到父级<div>：div {&nbsp; background-color: #ffa;&nbsp; text-align: center;}