У меня есть div для display:block (height и width 90px), и у меня есть текст внутри.
Мне нужно, чтобы текст был выровнен по центру как по вертикали, так и по горизонтали.
Я пробовал text-align:center, но он не выполняет горизонтальную часть, поэтому я попробовал vertical-align:middle, но это не сработало.
Есть идеи?
Если это одна строка текста и/или изображения, то это легко сделать. Просто используйте:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
Вот оно. Если это может быть несколько строк, то это несколько сложнее. Но есть решения на http://pmob.co.uk/. Ищите "вертикальное выравнивание".
Так как они, как правило, являются хаки или добавления сложных div-ов... Я обычно использую таблицу с одной ячейкой, чтобы сделать это... чтобы сделать его максимально простым.
Обычно это можно сделать с помощью transform, и он хорошо работает даже в старых браузерах, таких как Internet Explorer 10 и Internet Explorer 11. Он может поддерживать несколько строк текста:
position: relative;
top: 50%;
transform: translateY(-50%);
Пример: https://jsfiddle.net/wb8u02kL/1/
Решение выше использовал фиксированную ширину для области содержимого. Чтобы использовать ширину в термоусадочную пленку, используйте
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Пример: https://jsfiddle.net/wb8u02kL/2/
Я попробовал flexbox, но он не получил такой широкой поддержки, как он ломался в некоторых старых версиях Internet Explorer, таких как Internet Explorer 10.
transform translateX/translateY:Пример здесь/ Полноэкранный пример
В поддерживаемых браузерах (большинство из них), вы можете использовать top: 50%/left: 50% в комбинации с translateX(-50%) translateY(-50%) динамически вертикально/горизонтально центрируйте элемент.
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Пример здесь/ Полноэкранный пример
В поддерживаемых браузерах установите display целевого элемента на flex и используйте align-items: center для вертикального центрирования и justify-content: center для горизонтального центрирования. Не забудьте добавить префиксы поставщиков для дополнительной поддержки браузера (см. Пример).
html, body, .container {
height: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
table-cell/vertical-align: middle:Пример здесь/ Полноэкранный пример
В некоторых случаях вам необходимо убедиться, что высота элемента html/body установлена на 100%.
Для вертикального выравнивания установите родительский элемент width/height в 100% и добавьте display: table. Затем для дочернего элемента измените display на table-cell и добавьте vertical-align: middle.
Для горизонтального центрирования вы можете добавить text-align: center, чтобы центрировать текст и любые другие элементы inline children. В качестве альтернативы вы можете использовать margin: 0 auto, если уровень элемента block.
html, body {
height: 100%;
}
.parent {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.parent > .child {
display: table-cell;
vertical-align: middle;
}
50% сверху с перемещением:Пример здесь/ Полноэкранный пример
Этот подход предполагает, что текст имеет известную высоту - в этом случае 18px. Просто абсолютно позиционируйте элемент 50% сверху, относительно родительского элемента. Используйте отрицательное значение margin-top, которое составляет половину известной высоты элемента, в этом случае - -9px.
html, body, .container {
height: 100%;
}
.container {
position: relative;
text-align: center;
}
.container > p {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -9px;
}
line-height (наименее гибкий - не рекомендуется):В некоторых случаях родительский элемент будет иметь фиксированную высоту. Для вертикального центрирования все, что вам нужно сделать, - установить значение line-height для дочернего элемента, равное фиксированной высоте родительского элемента.
Хотя это решение будет работать в некоторых случаях, стоит отметить, что он не будет работать, если есть несколько строк текста - как это.
.parent {
height: 200px;
width: 400px;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
Методы 4 и 5 не являются самыми надежными. Пойдите с одним из первых 3.
Использование flexbox/CSS:
<div class="box">
<p>അ</p>
</div>
CSS:
.box{
display: flex;
justify-content: center;
align-items: center;
}
Взято из Быстрый совет: простой способ центрирования элементов по вертикали и по горизонтали
Добавьте строку display: table-cell; к вашему контенту CSS для этого div.
Только ячейки таблицы поддерживают vertical-align: middle; по vertical-align: middle; , но вы можете дать определение [table-cell] div...
Живой пример здесь: http://jsfiddle.net/tH2cc/
div{
height: 90px;
width: 90px;
text-align: center;
border: 1px solid silver;
display: table-cell; // This says treat this element like a table cell
vertical-align:middle; // Now we can center vertically like in a TD
}
Вы можете попробовать очень простой код для этого:
display: flex;
align-items: center;
justify-content: center;
.box{
height: 90px;
width: 90px;
background: green;
display: flex;
align-items: center;
justify-content: center;
}<div class="box">
Lorem
</div>Я всегда использую следующий CSS для контейнера, чтобы центрировать его содержимое по горизонтали и вертикали.
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
Смотрите это в действии здесь: https://jsfiddle.net/yp1gusn7/
Передайте этот класс CSS целевому элементу <div>:
.centered {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: red; /* Not necessary just to see the result clearly */
}<div class="centered">This text is centered horizontally and vertically</div>Вы можете использовать свойство flex в родительском div и добавить свойство margin:auto к дочерним элементам:
.parent {
display: flex;
/* You can change this to 'row' if you want the items side by side instead of stacked */
flex-direction: column;
}
/* Change the 'p' tag to what your items child items are */
.parent p {
margin: auto;
}
Вы можете увидеть больше вариантов flex здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello, World!!
</div># Parent
{
display:table;
}
# Child
{
display: table-cell;
width: 100%; // As large as its parent to center the text horizontally
text-align: center;
vertical-align: middle; // Vertically align this element on its parent
}
<div class="small-container">
<span>Text centered</span>
</div>
<style>
.small-container {
width:250px;
height:250px;
border:1px green solid;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.small-container span{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello, World!!
</div>Это работает для меня (проверено ОК!):
HTML:
<div class="mydiv">
<p>Item to be centered!</p>
</div>
CSS:
.mydiv {
height: 100%; /* Or other */
position: relative;
}
.mydiv p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%); /* To compensate own width and height */
}
Вы можете выбрать другие значения, кроме 50%. Например, 25% от центра в 25% от родителей.
<!DOCTYPE html>
<html>
<head>
<style>
.maindiv {
height: 450px;
background: #f8f8f8;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<div class="maindiv">
<h1>Title</h1>
</div>
</body>
</html>
Вы можете попробовать следующие методы:
Если у вас есть одно слово или предложение в одну строку, то следующий код может помочь.
Поместите текст внутри тега div и присвойте ему идентификатор. Определите следующие свойства для этого идентификатора.
id-name {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed red;
}
Примечание. Убедитесь, что свойство line-height совпадает с высотой деления.
Но если содержимое содержит более одного слова или строки, это не работает. Также будут случаи, когда вы не сможете указать размер деления в px или% (когда деление очень маленькое, и вы хотите, чтобы содержимое было точно посередине).
Чтобы решить эту проблему, мы можем попробовать следующую комбинацию свойств.
id-name {
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed red;
}
Эти 3 строки кода устанавливают содержимое точно в середине раздела (независимо от размера дисплея). "Align-items: center" помогает в вертикальном центрировании, тогда как "justify-content: center" сделает его горизонтально центрированным.
Примечание. Flex работает не во всех браузерах. Убедитесь, что вы добавили соответствующие префиксы поставщиков для дополнительной поддержки браузера.
.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center}
.cell {display: table-cell}
.cell-middle {vertical-align: middle}<div class="cell-row">
<div class="cell cell-middle">Center</div>
</div>Регулировка высоты линии, чтобы получить вертикальное выравнивание.
line-height: 90px;
Это должен быть правильный ответ. Самый чистый и простой:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 450px;
background: #f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-box-align: center;
justify-content: center;
width: 100%;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<p>Hello, World!</p>
</div>
</body>
</html>
Применить стиль:
position: absolute;
top: 50%;
left: 0;
right: 0;
Ваш текст будет центрирован независимо от его длины.
Это сработало для меня:
.center-stuff{
text-align: center;
vertical-align: middle;
line-height: 230px; /* This should be the div height */
}
Для меня это было лучшее решение:
HTML:
<div id="outer">
<img src="logo.png">
</div>
CSS:
#outer {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style ="text-align: center;">Center horizontal text</div>
<div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
</body>
</html>
Попробуйте следующий пример. Я добавил примеры для каждой категории: горизонтальные и вертикальные
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal
{
text-align: center;
}
#vertical
{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div id ="horizontal">Center horizontal text</div>
<div id ="vertical">Center vertical text</div>
</body>
</html>
footer {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
}