html - "text-align: center;"不应该应用于绝对定位的元素，不对其子元素执行任何操作吗？

Question

我先让你看看代码，然后告诉你我的问题是什么:

Tinkerbin:http://tinkerbin.com/x8iGCFsZ

<style>
  div.container{
    height: 200px;
    width: 200px;
    background-color:red;
    margin-top: 10px;
  }

  div.subContainer{
    position: relative;
    text-align: center;
  }

  div.inner{
   position: absolute;
   background-color:yellow;
   width: 150px;
  }
</style>

<div class="container">
  <div class="subContainer">
    <div class="inner">bananas for breakfast</div>
  </div>
</div>

所以，根据课本，text-align: center; , 当应用于父元素时，仅在其子元素具有 display: inline; 时居中.

因此，如您所料，自从一个 <div>默认显示设置为阻止 ( display:block; ) text-align: center;应用于 parent div.subContainer不对它的 child 做任何事div.inner .

到目前为止一切都很好。没什么奇怪的。

当我尝试使用 <span> 时出现了我的问题, 而不是 <div>在 .inner 上元素，我将其绝对定位 ( position: absolute; ) — 如您所知，强制将显示从默认内联更改为 block 显示。

看看:

<style>
  div.container{
    height: 200px;
    width: 200px;
    background-color:red;
    margin-top: 10px;
  }

  div.subContainer{
    position: relative;
    text-align: center;
  }

  span.inner{
   position: absolute;
   background-color:yellow;
   width: 150px;
  }
</style>

<div class="container">
  <div class="subContainer">
    <span class="inner">bananas for breakfast</span>
  </div>
</div>

发生的事情很奇怪。尽管具有 block 的强制显示值(感谢 position: absolute; )，跨度仍然居中。更重要的是，居中实际上很奇怪。它采用 block 的左侧并将其与包含元素的中心对齐，而不是像往常一样将两个中心对齐。

当我在 span.inner 上手动设置显示时，行为是固定的 — 开始像 block 一样行事。阻止。

span.inner{
   position: absolute;
   display: block;
   background-color:yellow;
   width: 150px;
}

那么，这里发生了什么？绝对定位不强制改变显示 block 吗？为什么居中很奇怪？

Answer 1

当您将其设置为 position: absolute 时，它确实变成了一个 block ，但是它在它最初出现的地方从内容流中删除了。由于您没有使用 top , left , bottom , 和 right , 这更明显。

使用 <div> 时:默认情况下，一个分区是 block 级的，将占据整个可能的宽度。因此，默认情况下，它会从框的左侧开始并向右扩展。将其定位为 absolutely 会将其保持在左上角最初出现的位置，唯一明显的区别是框的宽度。

使用 <span> 时:默认情况下，span 是受 text-align 影响的内联元素。它的 parent 的属性(property)。文本光标从元素的中心 开始，随着文本的输入，字符被添加并重新居中以适应文本的宽度。当您从流中删除 span 时，它会从 text 开始的位置开始。文本光标位于元素的正中心(水平方向)，因为现在实际父元素中没有文本。

您已经找到了解决方案:添加 display: block将强制该元素实际上是一个 block 级元素。事情是，仅仅因为 position: absolute “强制”此属性，它不是实际 属性，只是元素的计算 值。也就是说，只有在 CSS 定义中明确设置时，它才会应用于元素的位置。