Почему выравнивание по вертикали: середина не работает на моем 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>

ОТВЕТЫ

Ответ 1

Это, кажется, лучший способ - прошло некоторое время с момента моего первоначального поста, и это то, что нужно сделать сейчас: 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>

Ответ 2

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

/* 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;

Ответ 3

Использование CSS3:

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

Css:

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

Примечание. Это может не работать в старых версиях IE.

Ответ 4

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

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

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

Ответ 5

Если вы не можете положиться на flexbox... Поместите .child в .parent center. Работает, когда размеры пикселей неизвестны (другими словами, всегда) и нет проблем с 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>

Ответ 6

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

HTML

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

CSS

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

Fiddle

Ответ 7

Я использовал это, чтобы выровнять все в центре обертки 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>

Ответ 8

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

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

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

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

Absolute positioning

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

Align in the middle of the container

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

Absolute centered

Ответ 9

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 будет вертикально центрировано.

Ответ 10

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

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;
}

Ответ 11

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

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

Посмотрите jsfiddle!

Ответ 12

Вот самое последнее самое простое решение - не нужно ничего менять, просто добавьте три строки правил 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>

Ответ 13

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

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

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

Ответ 14

Просто поместите содержимое внутри таблицы с высотой 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>

Ответ 15

Для вертикального центрирования элемента 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;
}