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

Posted

技术标签:

【中文标题】文本对齐在两个相同的 div 上的工作方式不同?【英文标题】:Text-align doesn't work the same way on two identical div? 【发布时间】:2017-06-23 09:11:42 【问题描述】:

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

我正在我的网站上制作一个菜单,它的宽度为 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 的宽度并且文本根本不在中心,显然“文本对齐:右”也不起作用,我不明白,因为 .center 和 .left /.right 基本相同,我不知道 .center 和其他 div 有什么区别。

我的代码有什么问题?

【问题讨论】:

【参考方案1】:

因为以下样式

.menu lifloat: left; list-style: none; margin-right: 5%;

没有空间让您看到text-align 对您引用的文本有任何影响。这是因为当您 float 那些 li 时,它们会缩小到仅其内容所需的空间。

既然如此,很可能是因为您的ul 中的paddingmargin 让您觉得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 上的工作方式不同?的主要内容,如果未能解决你的问题,请参考以下文章

垂直对齐底部 div 与不同大小的文本

在单独的div中对齐元素[重复]

在 iphone sdk 的单行上对齐两个不同的文本

使用相同 CSS 的不同 div 标签 - 我该如何更改?

Bootstrap 4中的垂直对齐DIV和文本

如何在具有百分比高度的div中间垂直对齐文本? [复制]