Як я можу горизонтально центрувати a <div>
в межах іншого <div>
за допомогою CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Як я можу горизонтально центрувати a <div>
в межах іншого <div>
за допомогою CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Відповіді:
Ви можете застосувати цей CSS до внутрішнього <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Звичайно, ви не повинні встановити width
в 50%
. <div>
Буде працювати будь-яка ширина, менша за вміст . Це margin: 0 auto
те, що робить власне центрування.
Якщо ви орієнтуєтесь на Internet Explorer 8 (і пізніші версії), можливо, краще мати це:
#inner {
display: table;
margin: 0 auto;
}
Це зробить внутрішній елемент горизонтальним і він працює без встановлення конкретного width
.
Робочий приклад тут:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
margin-left: auto; margin-right: auto
я думаю.
margin:0 auto
: це може бути margin: <whatever_vertical_margin_you_need> auto
другим горизонтальним запасом.
Якщо ви не хочете встановлювати фіксовану ширину на внутрішній, div
ви можете зробити щось подібне:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Це робить внутрішнє div
у вбудований елемент, з яким можна по центру text-align
.
float: none;
і, ймовірно , потрібно тільки тому , що #inner успадкував float
або left
або right
де - то ще в вашому CSS.
text-align
так що ви можете встановити внутрішнє text-align
значення initial
чи якесь інше значення.
Найкращі підходи - із CSS 3 .
#outer {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Відповідно до зручності використання ви також можете використовувати box-orient, box-flex, box-direction
властивості.
Flex :
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
І це пояснює, чому модель коробки - найкращий підхід :
-webkit
прапорців для флексокса ( display: -webkit-flex;
і -webkit-align-items: center;
та -webkit-justify-content: center;
)
Припустимо, що ваш роздільник шириною 200 пікселів:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
Переконайтесь, що батьківський елемент розташований , тобто відносний, фіксований, абсолютний або липкий.
Якщо ви не знаєте ширину вашого поділу, ви можете використовувати transform:translateX(-50%);
замість від’ємного поля.
https://jsfiddle.net/gjvfxxdj/
З CSS calc () код може бути ще простішим:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
Принцип все одно той самий; покладіть предмет посередині і компенсуйте ширину.
Я створив цей приклад, щоб показати, як вертикально і горизонтально align
.
Код в основному такий:
#outer {
position: relative;
}
і ...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
І воно залишиться в center
навіть тоді, коли ви зміните розмір екрана.
Деякі плакати згадували спосіб CSS 3 до центру за допомогою display:box
.
Цей синтаксис застарів і більше не повинен використовуватися. [Дивіться також цю публікацію] .
Тож для повноти ось останній спосіб центрувати в CSS 3 за допомогою модуля гнучкої компонування коробки .
Тож якщо у вас проста розмітка, наприклад:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
... і ви хочете відцентрувати елементи в полі, ось що вам потрібно для батьківського елемента (.box):
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Якщо вам потрібна підтримка старих браузерів, які використовують старіший синтаксис для флеш-боксу, ось хороше місце для пошуку.
flex-direction
значення. Якщо це "рядок" (за замовчуванням) - тоді justify-content: center;
для горизонтального вирівнювання (як я вже згадував у відповіді) Якщо це "стовпець" - то justify-content: center;
для вертикального вирівнювання.
Якщо ви не хочете встановлювати фіксовану ширину і не хочете додаткового поля, додайте display: inline-block
до свого елемента.
Ви можете використовувати:
#element {
display: table;
margin: 0 auto;
}
display: table;
. Що це робить?
Горизонтально і вертикально. Він працює з досить сучасними браузерами (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera тощо).
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>
Це не може бути по центру, якщо ви не надаєте йому ширину. В іншому випадку це за замовчуванням займе весь горизонтальний простір.
width: fit-content;
і margin: 0 auto
. Я думаю, що це може працювати з невідомою шириною.
Властивість вирівнювання поля CSS 3
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Встановіть width
і встановіть margin-left
і, margin-right
щоб auto
. Ось для горизонтальної тільки , хоча. Якщо ви хочете обох способів, ви просто зробите це обома способами. Не бійтеся експериментувати; це не так, що ти щось зламаєш.
Нещодавно мені довелося зосереджувати "прихований" дів (тобто display:none;
), який мав в ньому форму, яку потрібно занести в центр на сторінці. Я написав наступний код jQuery, щоб відобразити прихований div, а потім оновити вміст CSS до автоматично сформованої ширини таблиці та змінити поле на центр. (Увімкнення перемикання дисплея спрацьовує натисканням на посилання, але цей код не потрібен.)
ПРИМІТКА. Я ділюся цим кодом, тому що Google привів мене до цього рішення щодо переповнення стека, і все працювало б, за винятком того, що приховані елементи не мають ширини і не можуть бути змінені / центрировані до моменту їх відображення.
$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>
Як я зазвичай це роблю, використовуючи абсолютне положення:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
Зовнішній div не потребує додаткових експертів для цього.
Для Firefox та Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
Для Internet Explorer, Firefox та Chrome:
<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
text-align:
Властивість НЕ є обов'язковим для сучасних браузерів, але це необхідно в режимі Internet Explorer Quirks для підтримки застарілих браузерів.
Використання:
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
Іншим рішенням для цього без встановлення ширини для одного з елементів є використання transform
атрибута CSS 3 .
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Хитрість полягає в тому, що translateX(-50%)
встановлюється #inner
елемент на 50 відсотків зліва від власної ширини. Можна використовувати той же трюк для вертикального вирівнювання.
Ось Загадка показує горизонтальне та вертикальне вирівнювання.
Більше інформації можна знайти в Мережі розробників Mozilla .
-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Кріс Койєр, який написав чудовий пост на тему "Центрування у невідомому" у своєму блозі. Це перелік декількох рішень. Я розмістив той, який не розміщений у цьому запитанні. Він має більшу підтримку браузера, ніж рішення Flexbox , і ви не використовуєте, display: table;
що може порушити інші речі.
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
Нещодавно я знайшов підхід:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
Щоб правильно функціонувати, обидва елементи повинні бути однакової ширини.
#inner
тільки: #inner { position:relative; left:50%; transform:translateX(-50%); }
. Це працює для будь-якої ширини.
Наприклад, дивіться це посилання та фрагмент нижче:
div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>
Якщо у вас багато дітей під батьком, то ваш вміст CSS повинен бути таким прикладу на скрипці .
Вигляд HTML-вмісту виглядає так:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
Потім дивіться цей приклад на скрипці .
На мій досвід, найкращим способом горизонтального центрування коробки є застосування наступних властивостей:
text-align: center;
display: inline-block;
.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="container">
<div class="centered-content">
Center this!
</div>
</div>
Дивіться також цю скрипку !
На мій досвід, найкращий спосіб центрирувати коробку обох вертикально, так і горизонтально - це використовувати додатковий контейнер і застосувати наступні властивості:
display: table;
display: table-cell;
vertical-align: middle;
text-align: center;
display: inline-block;
.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
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>
Дивіться також цю скрипку !
Найпростіший спосіб:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
#outer
не потрібен жоден, width:100%;
як <div>
завжди є за замовчуванням width:100%
. і text-align:center
теж зовсім не є необхідним.
Якщо ширина вмісту невідома, можна скористатися наступним методом . Припустимо, у нас є ці два елементи:
.outer
- повна ширина.inner
- не встановлено ширину (але максимум ширини можна вказати)Припустимо, обчислена ширина елементів становить 1000 пікселів і 300 пікселів відповідно. Виконайте наступне:
.inner
всередину.center-helper
.center-helper
вбудований блок; він набуває такого ж розміру, що .inner
робить його шириною 300 пікселів..center-helper
50% право відносно свого батька; це розміщує його зліва в 500 пікселів Wrt. зовнішній..inner
50% ліворуч відносно свого батька; це розміщує його зліва в -150 пікселів Wrt. центральний помічник, що означає, що його ліва частина знаходиться на 500 - 150 = 350 пікселів Wrt. зовнішній..outer
приховане, щоб запобігти горизонтальній смузі прокрутки.Демонстрація:
body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}
<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</div>
</div>
Можна зробити щось подібне
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
Це також буде вирівнювати #inner
вертикально. Якщо ви не хочете, видаліть display
і vertical-align
властивості;
Ось що ви хочете в найкоротші терміни.
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
Застосування text-align: center
вкладеного вмісту зосереджено в полі рядка. Однак оскільки внутрішній div за замовчуванням width: 100%
має встановити конкретну ширину або використовувати одне з наступних:
Використання margin: 0 auto
- це ще один варіант, який більше підходить для сумісності старих браузерів. Це працює разом з display: table
.
display: flex
поводиться як елемент блоку і викладає його вміст відповідно до моделі flexbox. Це працює з justify-content: center
.
Зверніть увагу: Flexbox сумісний з більшістю браузерів, але не з усіма. Дивіться тут для повного і оновлюваного списку сумісності браузерів.
transform: translate
дозволяє змінювати простір координат моделі візуального форматування CSS. За його допомогою елементи можна перекладати, обертати, масштабувати та перекошувати. Для центрування по горизонталі потрібно position: absolute
і left: 50%
.
<center>
(Застаріло)Тег <center>
є альтернативою HTML text-align: center
. Він працює на старих веб-переглядачах та на більшості нових, але це не вважається хорошою практикою, оскільки ця функція застаріла і була вилучена із веб-стандартів.
Ви можете використовувати display: flex
для свого зовнішнього діва та для горизонтального центру, який потрібно додатиjustify-content: center
#outer{
display: flex;
justify-content: center;
}
або ви можете відвідати w3schools - CSS flex Property для отримання додаткових ідей.
Flex має понад 97% охоплення браузера і може бути найкращим способом вирішити подібні проблеми протягом кількох рядків:
#outer {
display: flex;
justify-content: center;
}
Ну, мені вдалося знайти рішення, яке, можливо, підійде до всіх ситуацій, але використовує JavaScript:
Ось структура:
<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>
А ось фрагмент JavaScript:
$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
Якщо ви хочете використовувати його в чуйному підході, ви можете додати наступне:
$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
Цей метод також працює чудово:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Для внутрішнього <div>
боку єдиною умовою є те, що його height
і width
не повинно бути більше, ніж у контейнера.
Існував один варіант, який я знайшов:
Всі кажуть використовувати:
margin: auto 0;
Але є й інший варіант. Встановіть цю властивість для батьківського div. Він прекрасно працює в будь-який час:
text-align: center;
І бач, дитина йди центром.
І нарешті CSS для вас:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}