1

Есть код:

<div class="main" style="background: #acdf43; text-align: center;">
  <div class="cent" style="display: table;">
    <div class="l1" style="display: table-cell; background: #aaa;">123123123123123123123123123
      <br>321321321321321321321321321321321321321321321
      <br>111111111111111111
      <br>222222
      <br>333333333</div>
    <div class="l2" style="display: table-cell; background: #f00; vertical-align: bottom; height: 100%; width: 100px;">000</div>
  </div>
</div>

Нужно, чтобы блок cent был выровнен по центру. Сейчас это выглядит так:

результат

2 ответа 2

1

Блочные элементы не получится выровнять через text-align. Добавьте margin к классу cent с отступами по правому и левому краю, как auto.

<div class="main" style="background: #acdf43;">
    <div class="cent" style="display: table; margin: 0 auto 0 auto;">
        <div class="l1" style="display: table-cell; background: #aaa;">123123123123123123123123123<br>321321321321321321321321321321321321321321321<br>111111111111111111<br>222222<br>333333333</div>
        <div class="l2" style="display: table-cell; background: #f00; vertical-align: bottom; height: 100%; width: 100px;">000</div>
    </div>
</div>
1
  • Вопрос удалось решить через display: inline-table + родительский элемент оставить text-align: center. Насколько мой код итоговый вообще кросс-браузерный? 22 сен 2016 в 21:44
1

Text align не работает с блочным елементом

.cent { margin: 0 auto; }

либо дочерним элементам задайте значение display: inline-block

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.