Центрирование плавающих элементов div внутри другого элемента div
https://stackoverflow.com/questions/1269245
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я искал другие вопросы, и, хотя эта проблема похожа на пару других, ничто из того, что я видел до сих пор, похоже, не решает проблему, с которой я столкнулся.
У меня есть элемент div, который содержит несколько других элементов div, каждый из которых смещен влево.Каждый из этих элементов div содержит фотографию и подпись.Все, что я хочу, это чтобы группа фотографий была центрирована внутри содержащего div.
Как вы можете видеть из приведенного ниже кода, я пробовал использовать оба overflow:hidden и margin:x auto в родительских элементах div, а также я добавил clear:both (как предлагалось в другой теме) после фотографий.Кажется, ничто не имеет значения.
Спасибо.Я ценю любые предложения.
<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
<h4>Section Header</h4>
<div style="margin: 2em auto;">
<div style="float: left; margin: auto 1.5em;">
<img src="photo1.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo2.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo3.jpg" /><br />
Photo Caption
</div>
<div style="clear: both; height: 0; overflow: hidden;"> </div>
</div>
</div>
Решение
Сначала удалите float атрибут внутри divс.Затем положите text-align: center на главном внешнем div.И для внутреннего divS, использовать display: inline-block.Также было бы разумно указать им явную ширину.
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
Другие советы
С Флексбокс вы можете легко центрировать по горизонтали (и по вертикали) плавающие дети внутри div.
Итак, если у вас есть простая разметка, например:
<div class="wpr">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
с CSS:
.wpr
{
width: 400px;
height: 100px;
background: pink;
padding: 10px 30px;
}
.wpr span
{
width: 50px;
height: 50px;
background: green;
float: left; /* **children floated left** */
margin: 0 5px;
}
(Это (ожидаемое и нежелательное) РЕЗУЛЬТАТ)
Теперь добавьте в обертку следующие правила:
display: flex;
justify-content: center; /* align horizontal */
и плавающие дочерние элементы выравниваются по центру (ДЕМО)
Просто ради интереса, чтобы получить вертикальное выравнивание, просто добавьте:
align-items: center; /* align vertical */
ДЕМО
Я выполнил вышеописанное, используя относительное позиционирование и плавание вправо.
HTML-код:
<div class="clearfix">
<div class="outer-div">
<div class="inner-div">
<div class="floating-div">Float 1</div>
<div class="floating-div">Float 2</div>
<div class="floating-div">Float 3</div>
</div>
</div>
</div>
CSS:
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JSFiddle: http://jsfiddle.net/MJ9yp/
Это будет работать в IE8 и выше, но не раньше (сюрприз, сюрприз!)
К сожалению, я не помню источник этого метода, поэтому не могу указать автора.Если кто-нибудь знает, дайте ссылку!
В следующем решении не используются встроенные блоки.Однако для этого требуются два вспомогательных div:
- Содержимое плавающее
- Внутренний помощник является плавающим (он растягивается настолько же, насколько и содержимое)
- Внутренний помощник сдвинут вправо на 50% (его левая сторона совпадает с центром внешнего помощника)
- Содержимое сдвинуто влево на 50 % (его центр совпадает с левым краем внутреннего помощника)
- Внешний помощник настроен на скрытие переполнения.
.ca-outer {
overflow: hidden;
background: #FFC;
}
.ca-inner {
float: left;
position: relative;
left: 50%;
background: #FDD;
}
.content {
float: left;
position: relative;
left: -50%;
background: #080;
}
/* examples */
div.content > div {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background: #FFF;
}
ul.content {
padding: 0;
list-style-type: none;
}
ul.content > li {
margin: 10px;
background: #FFF;
}<div class="ca-outer">
<div class="ca-inner">
<div class="content">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</div>
</div>
<hr>
<div class="ca-outer">
<div class="ca-inner">
<ul class="content">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
<li>Suspendisse iaculis risus ut dapibus cursus.</li>
</ul>
</div>
</div>display: inline-block; не будет работать ни в одном из браузеров IE.Вот что я использовал.
// change the width of #boxContainer to
// 1-2 pixels higher than total width of the boxes inside:
#boxContainer {
width: 800px;
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Box{
width: 240px;
height: 90px;
background-color: #FFF;
float: left;
margin-left: 10px;
margin-right: 10px;
}
Решение:
<!DOCTYPE HTML>
<html>
<head>
<title>Knowledge is Power</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#outer {
text-align:center;
width:100%;
height:200px;
background:red;
}
#inner {
display:inline-block;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
</div>
</body>
</html>
В моем случае мне не удалось заставить ответ @Sampson работать на меня, в лучшем случае я получил один столбец по центру страницы.Однако в процессе я узнал, как на самом деле работает поплавок, и создал это решение.По сути, исправление очень простое, но его трудно найти, о чем свидетельствует эта ветка, которая на момент публикации этой публикации имела более 146 тысяч просмотров без упоминания.
Все, что нужно, — это подсчитать ширину экранного пространства, которое будет занимать желаемый макет, затем сделать родительский элемент такой же ширины и применить параметр «margin:auto».Вот и все!
Элементы макета будут определять ширину и высоту «внешнего» элемента div.Возьмите ширину или высоту каждого «myFloat» или элемента + его границы + его поля и отступы и сложите их все вместе.Затем таким же образом соедините остальные элементы.Это даст вам родительскую ширину.Все они могут быть разных размеров, и вы можете сделать это с меньшим или большим количеством элементов.
Пример. (каждый элемент имеет 2 стороны, поэтому граница, поле и отступы умножаются в 2 раза)
Таким образом, элемент с шириной 10 пикселей, границей 2 пикселя, полем 6 пикселей и отступом 3 пикселя будет выглядеть так:10 + 4 + 12 + 6 = 32
Затем сложите все общие ширины вашего элемента.
Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24
В этом примере ширина «внешнего» div будет равна 112.
.outer {
/* floats + margins + borders = 270 */
max-width: 270px;
margin: auto;
height: 80px;
border: 1px;
border-style: solid;
}
.myFloat {
/* 3 floats x 50px = 150px */
width: 50px;
/* 6 margins x 10px = 60 */
margin: 10px;
/* 6 borders x 10px = 60 */
border: 10px solid #6B6B6B;
float: left;
text-align: center;
height: 40px;
}<div class="outer">
<div class="myFloat">Float 1</div>
<div class="myFloat">Float 2</div>
<div class="myFloat">Float 3</div>
</div>