文本对齐在两个相同 div 上的工作方式不同？

Question

我在发帖前进行了研究，但找不到任何解决问题的方法。

我正在我的网站上制作一个菜单，它的宽度为 100%，在菜单内部，我放了 3 个不同的 div。

设法让它们占据宽度的 100%

.clear {
  clear: both;
}
.menu {
  position: relative;
  height: 20%;
  text-align: center;
}
.menu:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("images/triangles.svg");
  width: 100%;
  height: 100%;
  opacity: 0.1;
  z-index: -1;
}
.menu li {
  float: left;
  list-style: none;
  margin-right: 5%;
}
.left,
.center,
.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: blue;
}
.left,
.right {
  width: 30%;
}
.left {
  left: 5%;
  margin-right: 5%;
}
.right {
  right: 5%;
}
.center {
  width: 20%;
  left: 40%;
}

<div class="menu">
  <!--START-->
  <div class="left">
    <ul>
      <li><a href="#01">Element 1</a>
      </li>
      <li><a href="#02">Element 2</a>
      </li>
      <li><a href="#03">Element 3</a>
      </li>
    </ul>
  </div>

  <div class="center">
    <h1>Title</h1>
    <h3>Another Title</h3>
  </div>

  <div class="right">
    <ul>
      <li><a href="#04">Element 4</a>
      </li>
      <li><a href="#05">Element 5</a>
      </li>
      <li><a href="#06">Element 6</a>
      </li>
    </ul>
  </div>

  <div class="clear"></div>
</div>
<!--END-->

我的菜单有 svg 背景，但我认为这不是导致我出现问题的原因。问题是在 .left 和 .right 内部，text-align 不起作用，但它适用于 .center div。一开始我的三个 div 是浮动的，但我认为这是问题所在，我尝试使用绝对位置定位，但样式不起作用。

我应用了背景色来可视化 div 的宽度，但文本根本不在中心，显然 "text-align: right" 也不起作用，我不明白，因为 . center 和 .left/.right 基本一样，我搞不懂 .center 和其他的有什么区别 div.

我的代码有什么问题？

Answer 1

因为以下款式

.menu li{float: left; list-style: none; margin-right: 5%;}

没有 space，您可以在其中看到 text-align 对您引用的文本有任何影响。这是因为当您 float 那些 li 他们精简到只有 space 其内容所需。

既然如此，很可能是因为 ul 中的 padding 和 margin，您认为 text-align 就是答案。看下面代码

.right ul {margin: 0;padding:0;}

以及它的作用：

.clear {
  clear: both;
}
.menu {
  position: relative;
  height: 20%;
  text-align: center;
}
.menu:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("images/triangles.svg");
  width: 100%;
  height: 100%;
  opacity: 0.1;
  z-index: -1;
}
.menu li {
  float: left;
  list-style: none;
  margin-right: 5%;
}
.left,
.center,
.right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: blue;
}
.left,
.right {
  width: 30%;
  text-align: left;
}
.left {
  left: 5%;
  margin-right: 5%;
}
.right {
  right: 5%;
}
.center {
  width: 20%;
  left: 40%;
}
a {
  color: white;
}
.right ul {
  margin: 0;
  padding: 0;
}

<div class="menu">
  <!--START-->
  <div class="left">
    <ul>
      <li><a href="#01">Element 1</a>
      </li>
      <li><a href="#02">Element 2</a>
      </li>
      <li><a href="#03">Element 3</a>
      </li>
    </ul>
  </div>

  <div class="center">
    <h1>Title</h1>
    <h3>Another Title</h3>
  </div>

  <div class="right">
    <ul>
      <li><a href="#04">Element 4</a>
      </li>
      <li><a href="#05">Element 5</a>
      </li>
      <li><a href="#06">Element 6</a>
      </li>
    </ul>
  </div>

  <div class="clear"></div>
</div>
<!--END-->

根据您要实现的确切布局，这里有很多选项可以帮助您发挥 CSS 赋予您的力量，但希望这足以引导您迈出第一步朝着您希望到达的方向前进。

文本对齐在两个相同 div 上的工作方式不同？

Text-align doesn't work the same way on two identical div?

html

css

text-align

center