Я пытаюсь вертикально центрировать элемент 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>Это, кажется, лучший способ - прошло некоторое время с момента моего первоначального поста, и это то, что нужно сделать сейчас: 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>
Попробуйте это, работает для меня очень хорошо:
/* 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;
Использование CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
justify-content: center;
}
Примечание. Это может не работать в старых версиях IE.
Установка высоты строки на ту же высоту, что и div, также будет работать
DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/
.inner {
line-height:72px;
border: 1px solid #000000;
}
Если вы не можете положиться на 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">—</div>
</div>Вы должны поместить 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;
}
Я использовал это, чтобы выровнять все в центре обертки 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%. Это позволит расположить содержимое в центре контейнера из верхнего левого угла содержимого.
Таким образом, вы должны исправить это, переведя содержимое на половину его размера слева и сверху.
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 будет вертикально центрировано.
вот отличная статья о том, как выровнять. Мне нравится плавающий путь.
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;
}
Это просто. Просто добавьте 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>Так как 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>
Неуклюжий, но работает, насколько я могу судить. У этого могут быть недостатки других обходных решений.
Просто поместите содержимое внутри таблицы с высотой 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;
}