raw_input()
был переименован в input()
в Python 3.
Вы можете применить этот CSS к внутреннему <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Конечно, вам не нужно устанавливать width
на 50%
. Любая ширина, меньшая, чем содержащая <div>
, будет работать. margin: 0 auto
- это то, что делает фактическое центрирование.
Если вы ориентируетесь на IE8 +, возможно, лучше иметь это вместо:
#inner {
display: table;
margin: 0 auto;
}
Это сделает центр внутренних элементов горизонтально и работает без установки конкретного width
.
Рабочий пример здесь:
#inner {
display: table;
margin: 0 auto;
}
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
Лучшие подходы к 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%;
}
В соответствии с вашей практичностью вы также можете использовать box-orient, box-flex, box-direction
свойства.
Flex:
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
И это объясняет, почему модель коробки является лучшей подход:
-webkit
для flexbox (display: -webkit-flex;
и -webkit-align-items: center;
и -webkit-justify-content: center;
)
– Joseph Hansen
23 July 2015 в 15:59
Я создал этот пример , чтобы показать, как вертикально и горизонтально align
.
Код в основном таков:
#outer {
position: relative;
}
и ...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
, и он останется в center
, даже если вы измените размер экрана.
Если вы не хотите устанавливать фиксированную ширину во внутреннем 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.
– Doug McLean
12 November 2015 в 10:21
text-align
, поэтому вам может потребоваться установить внутреннюю text-align
на initial
или какое-либо другое значение.
– pmoleri
18 November 2016 в 22:52
Предположим, что ваш div имеет ширину 200px
:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
Убедитесь, что родительский элемент расположен , то есть относительный, фиксированный, абсолютный или липкий.
Если вы не знаете ширины своего div, вы можете использовать transform:translateX(-50%);
вместо отрицательного поля.
Некоторые плакаты упоминали о CSS & nbsp; 3 пути к центру с помощью display:box
.
Этот синтаксис устарел и больше не должен использоваться. [См. Также этот пост] .
Так что для полноты здесь самый последний способ сосредоточиться в CSS & nbsp; 3 с помощью Flexible Box Layout Module .
Итак, если у вас есть простая разметка вроде:
<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 */
}
.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 */
}
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.box {
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid tomato;
}
.box div {
margin: 0 10px;
width: 100px;
}
.item1 {
height: 50px;
background: pink;
}
.item2 {
background: brown;
height: 100px;
}
.item3 {
height: 150px;
background: orange;
}
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
Если вам нужно поддерживать старые браузеры, которые используют более старый синтаксис для flexbox , здесь хорошее место для просмотра.
flex-direction
. Если это «строка» (по умолчанию), то justify-content: center;
для горизонтального выравнивания (как я уже упоминал в ответе) Если это «столбец», то justify-content: center;
используется для вертикального выравнивания.
– Danield
22 March 2017 в 13:29
Он не может быть центрирован, если вы не придаете ему ширины, иначе он будет по умолчанию использовать все горизонтальное пространство.
#outer {
width:100%;
height:100%;
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
}
Если вы не хотите устанавливать фиксированную ширину и не хотите дополнительного поля, добавьте display: inline-block
к вашему элементу.
Вы можете использовать:
#element {
display: table;
margin: 0 auto;
}
display: table;
. Что оно делает?
– Matt Cremeens
31 July 2017 в 11:25
Недавно мне пришлось центрировать «скрытый» div (т. е. display: none;), в котором была встроена форма, которая должна была быть сосредоточена на странице. Я написал следующий jQuery для отображения скрытого div & amp; затем обновите CSS до автоматической сгенерированной ширины таблицы и измените маржу, чтобы центрировать ее. (Переключатель отображения запускается нажатием на ссылку, но этот код не обязательно отображался.)
ПРИМЕЧАНИЕ. Я использую этот код, потому что Google привел меня в это решение для переполнения стека и amp; все будет работать, за исключением того, что скрытые элементы не имеют ширины и amp; не могут быть изменены / центрированы до тех пор, пока они не будут показаны.
$(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>
Вот что вы хотите в кратчайшие сроки.
#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 % );
}
Flex имеет более 97% поддержки браузеров и может быть лучшим способом решения таких проблем в нескольких строках:
#outer {
display: flex;
justify-content: center;
}
Другим решением для этого без необходимости устанавливать ширину для одного из элементов является атрибут CSS 3 transform
.
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Фокус в том, что translateX(-50%)
устанавливает #inner
элемент на 50 процентов слева от его собственной ширины. Вы можете использовать тот же трюк для вертикального выравнивания.
Вот Fiddle , показывающий горизонтальное и вертикальное выравнивание.
Дополнительная информация находится в Mozilla Developer Network .
-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);
– Skippy le Grand Gourou
2 September 2015 в 13:48
Ну, мне удалось найти решение, которое, возможно, будет соответствовать всем ситуациям, но использует 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);
})
});
Один из вариантов, который я нашел:
Все говорят использовать:
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 */
}
Если ширина содержимого неизвестна, вы можете использовать следующий метод. Предположим, что у нас есть эти два элемента:
.outer
- полная ширина .inner
- не установлена ширина (но может быть указана максимальная ширина) Предположим, что вычисленная ширина элементов равна 1000px и 300px соответственно. Выполните следующие действия:
.inner
внутри .center-helper
.center-helper
встроенным блоком; он становится того же размера, что и .inner
, делая его шириной 300 пикселей. .center-helper
на 50% относительно родителя; это помещает его влево на 500px wrt. внешний. .inner
50% слева относительно его родителя; это помещает его левое на -150px wrt. который означает, что его левый угол равен 500 - 150 = 350px.
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>
] .outer {
overflow: hidden;
}
.center-helper {
float: left;
position: relative;
left: 50%;
}
.inner {
float: left;
position: relative;
left: -50%;
}
Как я обычно делаю это, используется абсолютная позиция:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
Внешнему div не нужно никаких дополнительных свойств для этого.
Крис Койер, который написал отличный пост в разделе «Центрирование в неизвестном» в своем блоге. Это обзор нескольких решений. Я отправил сообщение, которое не опубликовано в этом вопросе. У него больше поддержка браузера, чем решение 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 {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
Например, см. эту ссылку и фрагмент ниже:
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>
Затем см. пример на скрипке .
Установите width
и установите margin-left
и margin-right
на auto
. Это только для горизонтальной. Если вы хотите в обоих направлениях, вы просто сделаете это в обоих направлениях. Не бойтесь экспериментировать; это не похоже на то, что вы что-нибудь сломаете.
Это мой ответ.
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</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>
См. также этот Fiddle !
По моему опыту, лучший способ центрировать коробку как вертикально, так и горизонтально - использовать дополнительный контейнер и применять следующие свойства:
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>
См. также этот скрипт !
Горизонтально и вертикально.
.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>
.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>
.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>
Для Firefox и Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
Для Internet & nbsp; 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 & nbsp; Quirks Mode для поддержки устаревших браузеров.
Я понимаю, что я довольно поздно в игре, но это очень популярный вопрос, и я недавно нашел подход, который я не видел нигде здесь, поэтому решил, что я его запишу.
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
EDIT: оба элемента должны быть одинаковой ширины для правильной работы.
#inner
: #inner { position:relative; left:50%; transform:translateX(-50%); }
. Это работает для любой ширины.
– Jose Rui Santos
24 November 2015 в 11:30
Этот метод также отлично работает:
div.container {
display: flex;
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */
}
Для внутреннего <div>
единственным условием является то, что его height
и width
не должны быть больше, чем у его контейнера .
Вы можете сделать что-то вроде этого
#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
;
Применяя text-align: center
, встроенное содержимое центрируется в строке строки. Однако, поскольку внутренний div по умолчанию width: 100%
, вы должны установить определенную ширину или использовать одно из следующих значений:
#inner {
display: inline-block;
}
#outer {
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Использование margin: 0 auto
- еще одна опция, и она более подходит для совместимости старых браузеров. Он работает вместе с display: table
.
#inner {
display: table;
margin: 0 auto;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
display: flex
ведет себя как элемент блока и выдает его содержимое в соответствии с моделью flexbox. Он работает с justify-content: center
.
Обратите внимание: Flexbox совместим с большинством браузеров, но не со всеми. См. здесь для полного и обновленного списка совместимости браузеров.
#inner {
display: inline-block;
}
#outer {
display: flex;
justify-content: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
transform: translate
позволяет вам изменять координатное пространство модели визуального форматирования CSS. Используя его, элементы могут быть переведены, повернуты, масштабированы и перекошены. Для центрирования по горизонтали требуется position: absolute
и left: 50%
.
#inner {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
<center>
(Устаревший) Тег <center>
является альтернативой HTML text-align: center
. Он работает с более старыми браузерами и большинством новых, но это не считается хорошей практикой, поскольку эта функция устарела и удалена из веб-стандартов.
#inner {
display: inline-block;
}
<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>
Попробуйте сыграть с
margin: 0 auto;
Если вы хотите также центрировать свой текст, попробуйте использовать:
text-align: center;
margin-left: auto; margin-right: auto
, я думаю. – Emmanuel Touzery 9 February 2014 в 00:45margin:0 auto
: он может бытьmargin: <whatever_vertical_margin_you_need> auto
вторым, являющимся горизонтальным краем. – YakovL 3 May 2016 в 19:07