不应该“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;的{​​{1}}不会对孩子div.subContainer做任何事情。

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

当我尝试在div.inner元素上使用<span>而不是<div>时，我的问题就会出现问题，我绝对会定位它（.inner） - 正如您所知道的那样force将显示从默认内联更改为阻止。

看看：

position: absolute;

发生的事情很奇怪。尽管具有块的强制显示值（感谢<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> ），但跨度仍然居中。更重要的是，定心实际上很奇怪。它采用块的左侧并将其与包含元素的中心对齐，而不是像往常一样对齐两个中心。

当我手动将position: absolute;上的显示设置为阻止时，行为是固定的 - 开始像块一样 -

span.inner

那么，这里发生了什么？绝对定位不会强制将显示屏更改为阻塞吗？为什么中心怪异？

Answer 1

当您将其设置为position: absolute时，它确实会成为一个块，但会从内容流中删除它最初出现的点。由于您未使用top，left，bottom和right，因此这一点更为明显。

使用<div> 时：默认情况下，除法是块级别，可能会占用整个宽度。因此，默认情况下，它会从框的左侧开始并向右展开。绝对定位它会使它保持在最初出现的左上角，唯一明显的区别是盒子的宽度。

使用<span> 时：默认情况下，范围是一个内联元素，受其父级text-align属性的影响。文本光标从元素的中心开始，输入文本时，将添加字符并重新居中以调整文本的宽度。从流中删除跨度时，它将从文本开始的位置开始。文本光标位于元素的中心（水平），因为现在实际的父文件中没有文本。

您已经找到了解决方案：添加display: block将强制元素实际上是块级元素。问题是，只是因为position: absolute“强制”此属性，它不是实际属性，只有元素的计算值。话虽这么说，只有在明确设置CSS定义时才会应用于元素的位置。