Чтобы центрировать элемент HTML, я могу использовать CSS left: 50%; , Однако это центрирует элемент относительно всего окна.
У меня есть элемент, который является дочерним элементом элемента <div> и я хочу центрировать дочерний элемент относительно этого родительского элемента <div>, а не всего окна.
Я не хочу, чтобы контейнер <div> центрировал все свое содержимое, а только один конкретный дочерний элемент.
Как я могу это сделать?
Установить text-align:center; для родительского div и margin:auto; ребенку див.
#parent {
text-align:center;
background-color:blue;
height:400px;
width:600px;
}
.block {
height:100px;
width:200px;
text-align:left;
}
.center {
margin:auto;
background-color:green;
}
.left {
margin:auto auto auto 0;
background-color:red;
}
.right {
margin:auto 0 auto auto;
background-color:yellow;
}<div id="parent">
<div id="child1" class="block center">
a block to align center and with text aligned left
</div>
<div id="child2" class="block left">
a block to align left and with text aligned left
</div>
<div id="child3" class="block right">
a block to align right and with text aligned left
</div>
</div>На самом деле это очень просто с CSS3 flex box.
.flex-container{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
justify-content: center;
align-items: center;
width: 400px;
height: 200px;
background-color: #3498db;
}
.inner-element{
width: 100px;
height: 100px;
background-color: #f1c40f;
}<div class="flex-container">
<div class="inner-element"></div>
</div>CSS
body{
text-align:center;
}
.divWrapper{
width:960px //Change it the to width of the parent you want
margin: 0 auto;
text-align:left;
}
HTML
<div class="divWrapper">Tada!!</div>
Это должно центрировать div
2016 - метод HTML5 + CSS3
CSS
div#relative{
position:relative;
}
div#thisDiv{
position:absolute;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
HTML
<div id="relative">
<div id="thisDiv">Bla bla bla</div>
</div>
Fiddledlidle
text-align:center; в родительском div Должен сделать трюк
Является ли div фиксированной шириной или шириной жидкости? В любом случае, для ширины жидкости вы можете использовать:
#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}
Или вы можете установить родительский div в text-align:center;, а дочерний div - text-align:left;.
И left:50%; только центрирует его по всей странице, когда div установлен на position:absolute;. Если вы установили div в left:50%;, он должен сделать это относительно родительской ширины div. Для фиксированной ширины сделайте следующее:
#parent {
width:500px;
}
#child {
left:50%;
margin-left:-100px;
width:200px;
}
просто укажите родительский div position: relative
Прежде всего, вы можете сделать это с левым: 50%, чтобы центрировать его относительно родительского div, но для этого вам нужно изучить CSS-позиционирование.
Одно из возможных решений многих - сделать что-то вроде
div.parent { text-align:center; } //will center align every thing in this div as well as in the children element
div.parent div { text-align:left;} //to restore so every thing would start from left
если ваш ваш div, чтобы быть центрированным, позиционируется относительно, вы можете просто сделать
.mydiv { position:relative; margin:0 auto; }
left: 50% работает реже с ближайшим родителем с назначенной статической шириной. Попробуйте ширину: 500 пикселей или что-то в родительском div. В качестве альтернативы сделайте содержимое, которое вам нужно, чтобы отобразить центр: заблокируйте и установите левое и правое поля в автоматическое.
Если дочерний элемент является встроенным (например, не div, table и т.д.), я бы обернул его внутри div или p и сделаю текст обертки совпадающим с css-свойством равным центру.
<div id="container">
This text is aligned to the left.<br>
So is this text.<br>
<div style="text-align: center">
This <button>button</button> is centered.
</div>
This text is still aligned left.
</div>
В противном случае, если элемент является блоком (display: block, например, div или p) с фиксированной шириной, я бы автоматически задал свойства поля слева и справа css.
<div id="container">
This text is aligned to the left.<br>
So is this text.<br>
<div style="margin: 0 auto; width: 200px; background: red; color: white;">
My parent is centered.
</div>
This text is still aligned left.
</div>
Конечно, вы можете добавить элемент text-align: center к элементу обертки, чтобы сделать его содержимое также центрированным.
Я не буду беспокоиться о позиционировании, потому что IMHO это не путь для решения проблемы OP, но обязательно проверьте эта ссылка, очень полезно.
Создайте новый элемент div для вашего элемента в центр, затем добавьте класс специально для центрирования этого элемента, как этот
<div id="myNewElement">
<div class="centered">
<input type="button" value="My Centered Button"/>
</div>
</div>
Css
.centered{
text-align:center;
}
Я нашел другое решение
<style type="text/css">
.container {
width:600px; //set how much you want
overflow: hidden;
position: relative;
}
.containerSecond{
position: absolute;
top:0px;
left:-500%;
width:1100%;
}
.content{
width: 800px; //your content size
margin:0 auto;
}
</style>
и в теле
<div class="container">
<div class="containerSecond">
<div class="content"></div>
</div>
</div>
Это центрирует ваш контент div всякий раз, когда ваш контейнер больше или меньше. В этом случае ваш контент должен быть больше 1100% контейнера, чтобы его не центрировали, но в этом случае вы можете сделать с контейнером больше, и он будет работать
Назначьте text-align: center; родительскому элементу и display: inline-block; в div.
Если вы хотите использовать CSS3:
position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);
Возможно, вы захотите продолжить поиск, чтобы выяснить, как получить процент, соответствующий вашей ширине элемента.
например, у меня есть статья div, которая находится внутри основного содержимого div. Внутри статьи изображение и под этим изображением - кнопка, стиль которой выглядит следующим образом:
.article {
width: whatever;
text-align: center;
float: whatever (in case you got more articles in a row);
margin: give it whatever margin you want;
} .article {
}
/* внутри статьи я хочу, чтобы изображение было центрировано */
.article img {
float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;
}
/* Теперь под этим изображением в том же элементе статьи должна появиться кнопка типа read more Конечно, вам нужно работать с em или%, когда она находится внутри отзывчивого дизайна */
.button {
background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/
}
Удачи.
Если вы хотите центрировать элементы внутри div и не заботитесь о размере деления, вы можете использовать силу Flex. Я предпочитаю использовать flex и не использовать точный размер для элементов.
<div class="outer flex">
<div class="inner">
This is the inner Content
</div>
</div>
Как вы можете видеть, Outer div является контейнером Flex, а Inner должен быть элементом Flex, указанным в flex: 1 1 auto;, чтобы лучше понять, что вы можете увидеть этот простой пример. http://jsfiddle.net/QMaster/hC223/
Надеюсь на эту помощь.
Этот пост обеспечивает хорошее решение - http://mindthesemicolon.com/how-to-center-an-element-vertically-and-horizontally-using-css/ В основном: 1. Установите ребенка в положение абсолютное. 2. Установите родительскую позицию относительно позиции. 3. Установите дочерние элементы слева и сверху на 50%. 4. переведите (-50%, - 50%), чтобы сдвинуть влево и вверх на половину ширины дочернего элемента.
мой хотел бы магии.
html, body {
height: 100%;
}
.flex-container{
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
<div class="flex-container">
<div>Content</div>
</div>
<html>
<head>
</head>
<style>
.out{
width:200px;
height:200px;
background-color:yellow;
}
.in{
width:100px;
height:100px;
background-color:green;
margin-top:50%;
margin-left:50%;
transform:translate(-50%,50%);
}
</style>
<body>
<div class="out">
<div class="in">
</div>
</div>
</body>
</html>
Для центрирования только конкретного ребенка:
.parent {
height: 100px;
background-color: gray;
position: relative;
}
.child {
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 20px;
height:20px;
margin: auto;
}<div class="parent">
<span class="child">hi</span>
</div>