部门中的中心项目 (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: inline-block

或者

display:inline

因为p标签是一个块元素。基本上，所有块元素都有父元素的宽度。所以你不能让“100%宽度”元素居中。

Answer 3

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

Answer 4

首先，<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 中的项目居中 - 它只会将元素内的文本居中<a>。这就是为什么为了将容器内的项目居中，您可以将 text-align: center 应用到父级<div>：

div {

  background-color: #ffa;

  text-align: center;

}