It should not be "text-align: center"; applies to an absolutely positioned element, does nothing for its children?

Question

I will see the code first and then say what my problem is:

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>

So, according to the tutorial, text-align: center;when applied to a parent element, it only centers its children if they have display: inline;.

Therefore, as one would expect, since <div>the default value set to lock ( display:block;) text-align: center;, applied to the parent div.subContainer, does nothing for its child div.inner.

Everything is still. Nothing strange.

, <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.inner .

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

, ? ? ?

Answer 1

position: absolute, , , . top, left, bottom right, .

<div>: . , . , , .

<span>: , , , text-align . , , . , , . ( ) , .

: display: block . , , position: absolute "" , , . , CSS.