Вертикально центрируйте два элемента в div

Я пытаюсь вертикально центрировать два элемента <p>.

Я следил за учебником в phrogz.net, но все же элементы располагаются над div, ниже div, выровнены по верхнему краю в пределах дела.

Я бы попробовал что-то еще, но большинство вопросов здесь просто указывают на этот учебник.

Этот фрагмент предназначен для значка, расположенного на верхней части веб-страницы.

.banner {
  width: 980px;
  height: 69px;
  background-image: url(../images/nav-bg.jpg);
  background-repeat: no-repeat;
  /* color: #ffffff; */
}

.bannerleft {
  float: left;
  width: 420px;
  text-align: right;
  height: 652px;
  line-height: 52px;
  font-size: 28px;
  padding-right: 5px;
}

.bannerright {
  float: right;
  width: 555px;
  text-align: left;
  position: relative;
}

.bannerrightinner {
  position: absolute;
  top: 50%;
  height: 52px;
  margin-top: -26px;
}
<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p>
      <p>vertically centered</p>
    </div>
  </div>
  <div class="clear">
  </div>
</div>

Ответы

Ответ 1

Добавьте следующее: дисплей: стол; to bannerRight

дисплей: таблица-клетки; а также вертикально-Align: средний; to bannerrightinner

Я не пробовал это, пожалуйста, дайте мне отзыв, если он не работает.;)

EDIT: забыл упомянуть: отключить свойства "float" и "position"

Ответ 2

Как центральные элементы вертикально, горизонтально или оба

Вот два способа сосредоточить div в пределах div.

Один способ использует CSS Flexbox, а другой способ использует таблицу CSS и позиционированиесильные > свойства.

В обоих случаях высота центрированных divs может быть переменной, undefined, неизвестно, что угодно. Высота центрированных divs не имеет значения.

введите описание изображения здесь

Здесь HTML для обоих:

<div id="container">   

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS Flexbox Метод

#container {
    display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;        /* center items horizontally, in this case */
    height: 300px;
    border: 1px solid black;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;
}

DEMO

Два дочерних элемента (.box) выровнены по вертикали с помощью flex-direction: column. Для горизонтального выравнивания переключите flex-direction в row (или просто удалите правило, поскольку flex-direction: row является настройкой по умолчанию). Элементы будут оставаться центрированными по вертикали и по горизонтали (DEMO).

Таблица CSS и метод позиционирования

body {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

.box {
    width: 300px;
    padding: 5px;
    margin: 7px auto;   
    text-align: center;
}

DEMO

Какой метод использовать...

Если вы не знаете, какой метод использовать, я бы порекомендовал Flexbox по следующим причинам:

Поддержка браузера

Flexbox поддерживается всеми основными браузерами, за исключением IE < 10. В некоторых последних версиях браузера, таких как Safari 8 и IE10, требуется префиксы поставщика. Для быстрого добавления префиксов используйте Autoprefixer. Подробнее в этом ответе.