Я искал другие вопросы, и, хотя эта проблема кажется похожей на пару других, ничего, что я видел до сих пор, похоже, не затрагивает проблему, которая у меня есть.
У меня есть div, который содержит несколько других div, каждый из которых перемещается слева. Каждый из этих divs содержит фотографию и подпись. Все, что я хочу, это для того, чтобы группа фотографий была сосредоточена внутри содержащего div.
Как вы можете видеть из приведенного ниже кода, я попытался использовать как overflow:hidden, так и margin:x auto в родительских divs, а также добавил 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 s. Затем положите text-align: center на главный внешний div. А для внутренних div s,
используйте 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>
С Flexbox вы можете легко горизонтально (и вертикально) центрировать плавающие дети внутри 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 */
и плавающие дети получают выравниваемый центр (DEMO)
Просто для удовольствия, чтобы получить вертикальное выравнивание, просто добавьте:
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:
.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, чтобы работать для меня, в лучшем случае у меня есть одна колонка, сосредоточенная на странице. В процессе, однако, я узнал, как работает float и создал это решение. В этом ядре исправление очень просто, но трудно найти, как видно из этой темы, которая не имела просмотров более 146 тыс. Во время этого сообщения без упоминания.
Все, что необходимо, - это общее количество ширины пространства экрана, которое будет занимать желаемый макет, затем сделайте родительскую единицу шириной и примените margin: auto. Что это!
.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>