Я пытаюсь центрировать содержимое вкладок по вертикали, но при добавлении display:inline-flex
стиля css display:inline-flex
, горизонтальное выравнивание текста исчезает.
Как сделать выравнивание текста x и y для каждой из моих вкладок?
* { box-sizing:border-box; }
#leftFrame {
background-color:green;
position:absolute;
left:0;
right:60%;
top:0;
bottom:0;
}
#leftFrame #tabs {
background-color:red;
position:absolute;
top:0;
left:0;
right:0;
height:25%;
}
#leftFrame #tabs div {
border:2px solid black;
position:static;
float:left;
width:50%;
height:100%;
text-align:center;
display: inline-flex;
align-items: center;
}
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
transform
translateX
/translateY
:Пример здесь/ Пример полного экрана
В поддерживаемых браузерах (большинство из них) вы можете использовать top: 50%
/left: 50%
в сочетании с translateX(-50%) translateY(-50%)
для динамического вертикального/горизонтального translateX(-50%) translateY(-50%)
элемента.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
Пример здесь/ Пример полного экрана
В поддерживаемых браузерах настройте display
целевого элемента на flex
и используйте align-items: center
для вертикального центрирования и justify-content: center
для горизонтального центрирования. Только не забудьте добавить префиксы поставщиков для дополнительной поддержки браузера (см. Пример).
html, body, .container {
height: 100%;
}
.container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
table-cell
/vertical-align: middle
:Пример здесь/ Пример полного экрана
В некоторых случаях вам необходимо убедиться, что высота элемента html
/body
установлена на 100%
.
Для вертикального выравнивания установите width
/height
родительского элемента на 100%
и добавьте display: table
. Затем для дочернего элемента измените display
на table-cell
и добавьте vertical-align: middle
.
Для горизонтального центрирования вы можете добавить text-align: center
для центрирования текста и любых других inline
дочерних элементов. В качестве альтернативы вы можете использовать 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;
}
<section class="parent">
<div class="child">I'm vertically/horizontally centered!</div>
</section>
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;
}
<div class="container">
<p>I'm vertically/horizontally centered!</p>
</div>
line-height
(наименее гибкий - не рекомендуется): В некоторых случаях родительский элемент будет иметь фиксированную высоту. Для вертикального центрирования все, что вам нужно сделать, это установить значение line-height
для дочернего элемента, равное фиксированной высоте родительского элемента.
Хотя это решение будет работать в некоторых случаях, стоит отметить, что оно не будет работать, когда в тексте несколько строк, например.
.parent {
height: 200px;
width: 400px;
background: lightgray;
text-align: center;
}
.parent > .child {
line-height: 200px;
}
<div class="parent">
<span class="child">I'm vertically/horizontally centered!</span>
</div>
Если CSS3 является опцией (или у вас есть резерв), вы можете использовать transform:
.center {
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
}
В отличие от первого подхода выше, вы не хотите использовать левый: 50% с отрицательным переводом, потому что ошибка переполнения в IE9+. Используйте положительное правое значение, и вы не увидите горизонтальные полосы прокрутки.
transform: translateX(50%) translateY(50%);
вместо. Преобразование выше не является синтаксически правильным в соответствии с документами по преобразованию Mozilla .
transform
которые могут принимать значения X и Y, имеют основную функцию, которая принимает как специализированные функции, так и одну.
Лучший способ центрировать прямоугольник как по вертикали, так и по горизонтали, это использовать два контейнера:
display: table;
display: table-cell;
vertical-align: middle;
text-align: center;
display: inline-block;
body {
margin : 0;
}
.outer-container {
display: table;
width: 80%;
height: 120px;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
Смотрите также эту скрипку !
Чтобы центрировать контент по центру страницы, добавьте в свой внешний контейнер следующее:
position: absolute;
width: 100%;
height: 100%;
Вот демо для этого:
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
Смотрите также эту скрипку !
Самое простое и чистое решение для меня - использование свойства CSS3 "transform":
.container {
position: relative;
}
.container a {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
<div class="container">
<a href="#">Hello world!</a>
</div>
.align {
display: flex;
width: 400px;
height: 400px;
border: solid 1px black;
align-items: center;
justify-content: space-around;
}
.align div:first-child {
width: 20px;
height: 20px;
background-color: red;
position: absolute;
}
.align div {
width: 20px;
height: 20px;
background-color: blue;
}
<div class='align'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Первый ребенок будет выровнен по вертикали и по горизонтали в центре
чтобы центрировать Div на странице проверить ссылку на скрипт
#vh {
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 200px;
height: 200px;
background: white;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div id="vh">Div to be aligned vertically</div>
Обновление Другой вариант - использовать flex box проверить ссылку на скрипт
.vh {
background-color: #ddd;
height: 200px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
Другой подход - использовать таблицу:
<div style="border:2px solid #8AC007; height:200px; width:200px;">
<table style="width:100%; height:100%">
<tr style="height:100%">
<td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
</tr>
</table>
</div>
Самый простой способ центрировать div как вертикально, так и горизонтально:
.parent {
display: table;
width: 100%;
height: 100%;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="parent">
<div class="child">
<h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
</div>
</div>
Еще один пример:
<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
Text Here
</div>
</div>
Просто сделайте сверху, снизу, слева и справа на 0.
<html>
<head>
<style>
<div>
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}
</style>
</head>
<body>
<div> I am in the middle</div>
</body>
</html>
Для вертикального и горизонтального центрирования элемента мы также можем использовать приведенные ниже свойства.
Это свойство CSS alignments-items по вертикали и принимает следующие значения:
flex-start: элементы выравниваются в верхней части контейнера.
flex-end. Элементы выравниваются в нижней части контейнера.
центр: элементы выравниваются в вертикальном центре контейнера.
базовый уровень. Элементы отображаются на базовой линии контейнера.
растянуть. Элементы растягиваются, чтобы соответствовать контейнеру.
Это свойство CSS justify-content, которое выравнивает элементы по горизонтали и принимает следующие значения:
flex-start. Элементы выравниваются в левой части контейнера.
flex-end: элементы выравниваются с правой стороны контейнера.
центр. Элементы выравниваются в центре контейнера.
пробел между: элементы отображаются с равным интервалом между ними.
space-around: элементы отображаются с равным интервалом вокруг них.
Запустите этот фрагмент кода и посмотрите вертикальный и горизонтально выровненный div.
html,
body,
.container {
height: 100%;
width: 100%;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.mydiv {
width: 80px;
}
<div class="container">
<div class="mydiv">h & v aligned</div>
</div>
Ниже представлен подход Flex-box для получения желаемого результата.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flex-box approach</title>
<style>
.tabs{
display: -webkit-flex;
display: flex;
width: 500px;
height: 250px;
background-color: grey;
margin: 0 auto;
}
.f{
width: 200px;
height: 200px;
margin: 20px;
background-color: yellow;
margin: 0 auto;
display: inline; /*for vertically aligning */
top: 9%; /*for vertically aligning */
position: relative; /*for vertically aligning */
}
</style>
</head>
<body>
<div class="tabs">
<div class="f">first</div>
<div class="f">second</div>
</div>
</body>
</html>
/*Change units to "%", "px" or whatever*/
#wrapper{
width: 50%;
height: 70vh;
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
#left{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
background: red;
}
#right{
width: 50%;
height: 50vh;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: green;
}
.txt{
text-align: center;
line-height: 50vh;
}
<div id="wrapper">
<div id="left" class="txt">Left</div>
<div id="right" class="txt">Right</div>
</div>
.container{
width: 50%; //Your container width here
height: 50%; //Your container height here
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Это должно работать
.center-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<div class="center-div">Center Div</div>
Вы можете добиться этого с помощью CSS (ваш элемент display:inline-grid
+ grid-auto-flow: row;
) Grid и Flex Box (display:flex;
родительского элемента display:flex;
),
Смотрите ниже фрагмент
#leftFrame {
display: flex;
height: 100vh;
width: 100%;
}
#tabs {
display: inline-grid;
grid-auto-flow: row;
grid-gap: 24px;
justify-items: center;
margin: auto;
}
html,body {
margin:0;
padding:0;
}
<div>
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>
</div>
Сетка css подход
#wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.main {
background-color: #444;
}
<div id="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box main"></div>
</div>