it-swarm.com.ru

Вертикальный текст выравнивания в внутреннем блоке div

Я строю веб-сайт с плоским дизайном. У меня есть заголовок и под ним два разных цветных блока рядом друг с другом. Я пытался плавать влево и вправо, но вместо этого мне посоветовали использовать display: inline-block.

Я столкнулся с проблемой, хотя. Я хочу поместить текст прямо посередине левого и правого блоков и попытался использовать align-items: center, но понял, что это работает, только если для div установлено значение flex.

Итак, мой вопрос, могу ли я как-нибудь сохранить свой встроенный блок и центрировать текст по центру моих блоков (как по горизонтали, так и по вертикали)?

    body {
      margin: 80px 0 0;
    }
    #pagewrapper {
      width: 100%;
    }
    #header {
      width: 100%;
      height: 80px;
      background-color: #008B8B;
      position: fixed;
      top: 0;
    }
    .content-left,
    .content-right {
      width: 50%;
      height: 500px;
      color: #FFFFFF;
      display: -moz-inline-stack;
      display: inline-block;
      zoom: 1;
      *display: inline;
    }
    .content-left {
      background-color: #66CC99;
    }
    .content-right {
      background-color: #20B2AA;
    }
    #header-bot {
      height: 800px;
      background-color: #F8F8FF;
    }
    #footer {
      height: 50px;
      background-color: #AFEEEE;
    }
    .title {
      font-size: 18px;
    }
<body>
  <div id="pagewrapper">
    <div id="header">
    </div>
    <!-- End of Header -->
    <div class="content-left">
      <span class="title">This is left Content</span>
    </div>
    <!-- End of Content Left -->
    <div class="content-right">
      <span class="title">This is Right Content</span>
    </div>
    <!-- End of Content Right -->
    <div id="header-bot">
    </div>
    <!-- End of Header-Bot -->
    <div id="footer">
    </div>
    <!-- End of Footer -->
  </div>
  <!-- End of PageWrapper -->

</body>

7
Jesper Andersen

Хотя изменение типа отображения столбцов на table-cell может вызвать проблемы (например, эффект позиционирования relative для элементов ячейки таблицы не определен), другой вариант - добавить в столбцы элемент полной высоты (псевдо) и выровнять его и элемент <span> вертикально vertical-align: middle; декларацией:

ПРИМЕР ЗДЕСЬ

.content-left,
.content-right { text-align: center; } /* Align inline children horizontally */

.content-left:after, .content-right:after {
    content: "";
    display: inline-block;
    vertical-align: middle;  /* Align inline level elements vertically */
    height: 100%;
} 

.title {
    vertical-align: middle;  /* Align inline level elements vertically */
}

Для получения более подробной информации вы можете обратиться к мой ответ здесь.

13
Hashem Qolami

На ваших .content-left и .content-right divs измените отображение на таблицу и добавьте выравнивание текста по центру. Для диапазонов .title измените отображение на ячейку таблицы и добавьте вертикальное выравнивание по середине;

.content-left, .content-right {
    display: table;
    text-align: center;
}
.title {
    display: table-cell;
    vertical-align: middle;
}

Вот пример jsfiddle (я изменил div, чтобы иметь высоту 200px, чтобы легче было увидеть эффект центрирования в маленьком окне jsfiddle)

2
kinakuta