不应该"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>默认显示设置为block(display:block;),因此text-align: center;应用于父级div.subContainer不会对其子级执行任何操作div.inner.

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

当我尝试使用<span>而不是<div>在.inner元素上时,我的问题引起了我的绝对定位(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.innerto块上的显示时,行为是固定的 - 开始像块一样.

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

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

Answer 1

当您将其设置为时position: absolute,它确实会成为一个块,但它会在最初出现的位置从内容流中删除.既然你不使用top,left,bottom,和right,这是更为明显.

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

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

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