Не должен "text-align: center;" применяется к абсолютно позиционированному элементу, ничего не делать с его дочерними элементами? - PullRequest
Новая
       1

Не должен "text-align: center;" применяется к абсолютно позиционированному элементу, ничего не делать с его дочерними элементами?

5 голосов
/ 10 февраля 2012

Сначала я дам вам посмотреть код, а затем расскажу, в чем моя проблема:

Тинкербин: 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;, примененный к родителю div.subContainer, ничего не делает со своим дочерним элементом div.inner.

Пока все хорошо. Ничего странного.

Моя проблема возникает, когда я пытаюсь использовать <span> вместо <div> на элементе .inner, и я позиционирую его абсолютно (position: absolute;) & mdash; который, как вы знаете, принудительно изменяет отображение со встроенного по умолчанию на блокировку.

Взгляните: 

<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;), диапазон по-прежнему центрирован. И даже более того, центрирование на самом деле странно. Он берет левую сторону блока и выравнивает его по центру содержащего элемента, вместо того, чтобы, как обычно, выравнивать оба центра.

Поведение исправлено & mdash; начинает действовать как блок & mdash; когда я вручную установил дисплей на span.inner для блокировки. 

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

Итак, что здесь происходит? Меняет ли абсолютное позиционирование силу, чтобы дисплей блокировался? Почему центрирование странное?

1 Ответ

16 голосов
/ 10 февраля 2012

Когда вы установите его на position: absolute, он станет блоком, но он будет удален из потока контента в тот момент, когда он первоначально появился бы . Поскольку вы не используете top, left, bottom и right, это гораздо более заметно.

При использовании <div>: деление по умолчанию выполняется на уровне блоков и занимает всю возможную ширину. Таким образом, он будет по умолчанию начинаться с левой стороны поля и расширяться вправо. Размещение этого абсолютно сохранит его в верхнем левом углу, где оно первоначально появилось , единственная заметная разница - ширина коробки.

result-with-div

При использовании <span>: диапазон по умолчанию является встроенным элементом, на который влияет свойство text-align его родителя. Курсор текста начинается с центра элемента, и при вводе текста символы добавляются и перецентрируются для настройки ширины текста. Когда вы удаляете интервал из потока, он начинается в точке, где начался бы текст . Курсор текста находится в самом центре (по горизонтали) элемента, так как теперь нет фактического родителя.

result-with-span

Вы уже нашли решение: добавление display: block заставит элемент фактически быть элементом уровня блока. Дело в том, что только то, что position: absolute «форсирует» это свойство, это не фактическое свойство, а только вычисленное значение элемента. При этом он применяется только к позиции элемента, когда он явно установлен в его определениях CSS.

...