Почему выравнивание по вертикали: середина не работает на моем span или div?

Я пытаюсь вертикально центрировать элемент spanили divэлемент внутри другого divэлемента. Однако, когда я ставлю vertical-align: middle, ничего не происходит. Я попытался изменить displayсвойства обоих элементов, но ничего не работает.

Вот что я сейчас делаю на своей веб-странице:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Вот jsfiddle реализации, показывающий, что она не работает: http://jsfiddle.net/gZXWC/

Это, кажется, лучший способ - прошло некоторое время с момента моего первоначального поста, и это то, что должно быть сделано сейчас: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Используя CSS3:

<div class="outer">
   <div class="inner"/>
</div>

Css:

.outer {
  display : flex;
  align-items : center;
  justify-content: center;
}

Примечание: это может не работать в старых IE

Попробуйте это, у меня работает очень хорошо:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Установка высоты строки на ту же высоту, что и содержащая div, также будет работать

ДЕМО http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Если вы не можете положиться на flexbox ... Поместите .childв .parentцентр. Работает, когда размеры пикселей неизвестны (другими словами, всегда), и нет проблем с IE9 + тоже.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Вы должны надеть vertical-align: middleвнутренний элемент, а не внешний элемент. Установите line-heightсвойство на внешнем элементе, чтобы соответствовать heightвнешнему элементу. Затем установите display: inline-blockи line-height: normalна внутренний элемент. При этом текст на внутреннем элементе будет перенесен с обычной высотой строки. Работает в Chrome, Firefox, Safari и IE 8+

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

скрипка

Я использовал это, чтобы выровнять все по центру div-оболочки, на случай, если это кому-нибудь поможет - я нашел это проще всего:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Здесь у вас есть пример двух способов сделать вертикальное выравнивание. Я использую их, и они работают довольно хорошо. Один использует абсолютное позиционирование, а другой использует flexbox .

Пример вертикального выравнивания

Используя flexbox, вы можете выровнять элемент внутри другого элемента с display: flex;помощью align-self. Если вам нужно выровнять его также по горизонтали, вы можете использовать align-itemsи justify-contentв контейнере.

Если вы не хотите использовать flexbox, вы можете использовать свойство position. Если вы сделаете контейнер относительным, а содержимое - абсолютным, содержимое сможет свободно перемещаться внутри контейнера. Так что если вы используете top: 0;и left: 0;в контенте, он будет расположен в верхнем левом углу контейнера.

Затем, чтобы выровнять его, вам просто нужно изменить верхнюю и левую ссылки на 50%. Это позволит расположить содержимое в центре контейнера из верхнего левого угла содержимого.

Так что вам нужно исправить это, переведя содержимое на половину его размера слева и сверху.

Вот отличная статья о том, как выровнять по вертикали. Мне нравится способ с плавающей точкой.

http://www.vanseodesign.com/css/vertical-centering/

HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

И соответствующий стиль:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

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

Мы устанавливаем родительский div для отображения в виде таблицы, а дочерний div для отображения в качестве ячейки таблицы. Затем мы можем использовать вертикальное выравнивание на дочернем элементе div и установить его значение на середину. Все внутри этого дочернего элемента div будет вертикально центрировано.

Это просто. Просто добавьте display:table-cellв свой основной класс.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

Проверьте это jsfiddle !

Вот последнее простейшее решение - не нужно ничего менять, просто добавьте три строки правил CSS в свой контейнер div, в котором вы хотите сосредоточиться. Я люблю Flex Box#LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

бонус

В качестве justify-contentзначения можно указать следующие несколько параметров:

• flex-start, который выровняет дочерний элемент div в том месте, где поток flex начинается в его родительском контейнере. В этом случае он останется на вершине.

• center, который выровняет дочерний элемент div по центру его родительского контейнера. Это действительно аккуратно, потому что вам не нужно добавлять дополнительный div для обтекания всех дочерних элементов, чтобы поместить обертку в родительский контейнер для центрирования дочерних элементов. Из-за этого это истинный вертикальный центр ( column flex-directionаналогично, если вы измените его flow-directionна row, он станет горизонтально центрированным).

• flex-end, который выровняет дочерний элемент div в том месте, где поток flex заканчивается в его родительском контейнере. В этом случае он переместится вниз.

• space-between, который распространит все дочерние элементы от начала потока до конца потока. Если демо, я добавил еще один дочерний div, чтобы показать, что они разложены.

• space-aroundАналогично space-between, но с половиной пространства в начале и конце потока.

Поскольку он vertical-alignработает, как и ожидалось td, вы можете поместить один элемент tableв, divчтобы выровнять его содержимое.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

Неуклюжий, но работает, насколько я могу судить. Это может не иметь недостатков других обходных путей.

Просто поместите содержимое в таблицу с высотой 100% и установите высоту для основного div

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Для вертикального центрирования элемента span или div в другом div, добавьте позицию относительно родительского div и абсолютную позицию по отношению к дочернему div. Теперь дочерний div можно расположить в любом месте внутри div. Пример ниже центров как по горизонтали, так и по вертикали.

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

CSS:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Это современный подход, использующий функциональность CSS Flexbox. Теперь вы можете выровнять содержимое в родительском контейнере по вертикали, просто добавив эти стили в .mainконтейнер.

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

И вам хорошо идти!