Искать здесь

в заметках в файлах в ссылках

Еще одна полезная заметка о выравнивании по центру элемента, когда его конкретная ширина неизвестна. Рассматривается способ, использованный в другой статье «Страница с горизонтально-вертикальной центровкой с помощью CSS»

Расположить по центру блочный элемент очень легко, указав margin:auto и ширину этого элемента (IE5+ требуют text-align:center для родительского элемента). Иногда необходимо отцентрировать блочный элемент, не имеющей точной ширины, обернув его в другой блочный элемент. Для этого нужно приложить немного усилий.

К счастью, есть очень простой способ достичь этого. Если вы уже видели пример вертикального центрирования элемента, когда этот элемент сначала перемещается вниз на 50%, а затем родительский элемент смещается вверх на 50% — в результате чего мы получаем вертикально выровненный элемент, то этот способ будет вам знаком. К сожалению, данный метод вертикального центрирования работает только в браузерах IE, но если мы используем его для горизонтального выравнивания элемента, то этот метод поймут и остальные браузеры.

.xouter{
  position:relative;
  left:50%;
  float:left;
  clear:both;
  margin:10px 0;
  text-align:left;
}
.xinner{
  border:1px solid #000;
  padding:10px 20px;
  position:relative;
  left:-50%;
  text-align:left;
}

Браузер IE5 на Mac отобразит результат применения данного способа неверно. Решением этой проблемы является использование display:inline-block для выравниваемого элемента. Причина использования плавающего блока без явного указания ширины в том, что он обертывает контент так, как нам этого хотелось.

Внешний элемент перемещается на 50% от левого края с использованием position:relative (указание этого необходимо для того, чтобы этот блок не выбивался из нормального потока документа). Внутренний элемент перемещается назад на 50% влево так же с использованием postion:relative — все это в совокупе позволяет нам выровнить блок, не имеющий точной ширины, точно посередине.

Использование этого метода порождает одну проблему: если выравниваемый блок имеет ширину большую половины размера окна, то в этом случае появляется полоса прокрутки (это относится как к вертикальному выравниванию, так и к горизонтальному — примеч. переводчика).

Ниже несколько примеров использования описанного метода.

Данная статья является переводом. При желании вы всегда можете прочитать эту статью на английском языке.