Я пытаюсь центрировать содержимое вкладок по вертикали, но когда я добавляю 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
:[Пример здесь][1] / [Полноэкранный пример][2]
В поддерживаемых браузерах (большинство из них) вы можете использовать top: 50%
/left: 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>
[Пример здесь][4] / [Полноэкранный пример][5]
В поддерживаемых браузерах установите display
целевого элемента на flex
и используйте align-items: center
для вертикального выравнивания и justify-content: center
для горизонтального выравнивания. Не забудьте добавить префиксы производителей для дополнительной поддержки браузеров ([см. пример][7]).
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``:[Пример здесь][8] / [Полноэкранный пример][9]
В некоторых случаях необходимо убедиться, что высота элемента 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%
от вершины со смещением:[Пример здесь][10] / [Полноэкранный пример][11]
Этот подход предполагает, что текст имеет известную высоту - в данном случае 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
(Наименее гибкий - не предлагается):[Пример здесь][12]
В некоторых случаях родительский элемент имеет фиксированную высоту. Для вертикального центрирования достаточно установить значение line-height
для дочернего элемента, равное фиксированной высоте родительского элемента.
Хотя это решение работает в некоторых случаях, стоит отметить, что оно не будет работать, когда есть несколько строк текста - [как здесь][13].
.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;
}
В отличие от первого подхода выше, вы'не хотите использовать left:50% с отрицательным переводом, потому что существует ошибка переполнения в IE9+. Используйте положительное правое значение, и вы не увидите горизонтальных полос прокрутки.
Лучший способ центрировать окно как вертикально, так и горизонтально, является использование двух контейнеров :
в
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
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;
}
в
См. Также [эта скрипка][1]!
В центре ваш контент в центре страницы, необходимо добавить следующий код в контейнер проблема :
Здесь'ы демо для этого :
в
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>
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;
}
в
См. Также [эта скрипка][2]!
Вот как использовать 2 простых свойства Flex центр Н дивов на 2 оси:
в
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}
<div>foo</div>
<div>bar</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>
в
в
.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>
в
Первый ребенок будет выровнен по вертикали и горизонтали в центре
Самое простое и чистое решение для меня-это с помощью CSS3 и собственность на "преобразование и":
в
.container {
position: relative;
}
.container a {
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
<div class="container">
<a href="#">Hello world!</a>
</div>
в
Ниже Флекс-нестандартный подход, чтобы получить желаемый результат
в
<!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>
в
Другой подход заключается в использовании таблицы:
<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>
Для вертикального и горизонтального центрирования элемента мы также можем использовать перечисленные ниже свойства.
Это CSS-свойство выравнивает элементы по вертикали и принимает следующие значения:
flex-start: Элементы выравниваются по верхней части контейнера.
flex-end: Элементы выравниваются по нижней части контейнера.
center: Элементы выравниваются по вертикальному центру контейнера.
baseline: Элементы отображаются по базовой линии контейнера.
stretch: Элементы растягиваются, чтобы соответствовать контейнеру.
Это CSS-свойство justify-content, которое выравнивает элементы по горизонтали и принимает следующие значения:
flex-start: Элементы выравниваются по левой стороне контейнера.
flex-end: Элементы выравниваются по правой стороне контейнера.
center: Элементы выравниваются по центру контейнера.
space-between: Элементы отображаются с одинаковым расстоянием между ними.
space-around: Элементы отображаются с равным расстоянием вокруг них.
чтобы центрировать div В страницу <и> [1]&ЛТ[проверьте ссылку скрипки];/роз>
в
в
<див ИД="по ВХ" и>div, чтобы быть выровнены по вертикали</дел>
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;
}
в
Обновление Другой вариант заключается в использовании коробки гибкого трубопровода <и> [2]&ЛТ[проверьте ссылку скрипки];/роз>
в
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
в .ВХ { фон-цвет: #ДДД; высота: 200px; выровнять элементы: центр; дисплей: флекс; } .ВХ > див { ширина: 100%; текст-выровняйте: центр; вертикальный-выровняйте: середина; } в
Подход сетку 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>
в
Просто сделать сверху,снизу, слева и справа на 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>
в
/*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;
}
Вы можете добиться этого с помощью CSS (отображать элемент: рядный сетки
+ сетки-автоматическая подача: строки;
) сетки и гибкого трубопровода коробки ( родительский элемент дисплей:гибкий;
),
Смотрите ниже фрагмент
в
#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>
в
Самый простой способ центрирование блока 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>
в
Еще Один Пример:
.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>
Источник Ссылка
метод 1) тип дисплея шлейф
.ребенок-элемент{ дисплей: шлейф; оправдать-содержание: центр; выравнивание-элементов: центра; }
Способ 2) преобразование 2D
.ребенок-элемент { верхняя часть: 50%; слева: 50%; преобразования: перевести(-50% , -50%); позицию: абсолютная; }
Ознакомиться с другими методами здесь
Просто ! Использовать дисплей Flex на контейнер и margin auto на текст !!!!
#hood{
width : 300px;
height: 100px;
border: solid 1px #333333;
display: flex;
}
#hood span{
margin: auto
}
<html>
<head></head>
<body>
<div id="hood">
<span> I Am Centered</span>
</div>
</body>
</html>
Демо:
Проверено : сафари, хром, Firefox и Safari на macOS Мохаве . ( все последние обновления по 25 февраля 2019 )
Это должно работает
<див класс="в центре-див" и></див>
в
.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>
в