Центрирование плавающих divs внутри другого div

Я искал другие вопросы, и, хотя эта проблема кажется похожей на пару других, ничего, что я видел до сих пор, похоже, не затрагивает проблему, которая у меня есть.

У меня есть div, который содержит несколько других div, каждый из которых плавает слева. Каждый из этих divs содержит фотографию и подпись. Все, что я хочу, – это то, что группа фотографий будет сосредоточена внутри содержащего div.

Как вы можете видеть из приведенного ниже кода, я попытался использовать как overflow:hidden и margin:x auto в родительских divs, и я также добавил clear:both (как предлагается в другом разделе) после фотографий. Кажется, ничего не изменилось.

Спасибо. Я ценю любые предложения.

 

Section Header


Photo Caption

Photo Caption

Photo Caption

Сначала удалите атрибут float во внутреннем div s. Затем поместите text-align: center на главный внешний div . А для внутреннего div s используйте display: inline-block . Также может быть разумным дать им явные ширины.


 
Nadia Bjorlin
Nadia Bjorlin

С помощью Flexbox вы можете легко горизонтально (и вертикально) центрировать детей внутри 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 */ 

DEMO

Я выполнил вышеуказанное, используя относительное позиционирование и плавающее вправо.

Код HTML:

 
Float 1
Float 2
Float 3

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; } тем .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:

  1. Содержимое размещено
  2. Внутренний помощник плавает (он растягивается так же, как и содержимое)
  3. Внутренний помощник сдвинут на 50% (его левый выравнивается с центром внешнего помощника)
  4. Содержимое вытягивается влево на 50% (его центр выравнивается слева от внутреннего помощника)
  5. Внешний помощник установлен, чтобы скрыть переполнение
 .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; } 
 
Box 1
Box 2
Box 3

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Nullam efficitur nulla in libero consectetur dictum ac a sem.
  • Suspendisse iaculis risus ut dapibus cursus.

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; } 

Решение:

    Knowledge is Power      
Hello, I am Touhid Rahman. The man in Light

В моем случае, я не мог получить ответ от @Sampson, чтобы работать на меня, в лучшем случае у меня есть одна колонка, сосредоточенная на странице. В процессе, однако, я узнал, как работает float и создал это решение. В основе этого исправления очень просто, но трудно найти, как видно из этой темы, которая не имела просмотров более 146 тыс. Во время этого сообщения без упоминания.

Все, что необходимо, – это общее количество ширины пространства экрана, которое будет занимать желаемый макет, затем сделайте родительскую единицу шириной и примените margin: auto. Это оно!

Элементы в макете будут определять ширину и высоту «внешнего» div. Возьмите каждый «myFloat» или ширину или высоту элемента + его границы + его поля и его прокладки и добавьте их все вместе. Затем добавьте другие элементы вместе таким же образом. Это даст вам родительскую ширину. Все они могут быть несколько разных размеров, и вы можете сделать это с меньшим количеством элементов.

Пример (каждый элемент имеет две стороны, поэтому граница, маржа и заполнение умножаются на х2)

Таким образом, элемент, который имеет ширину 10 пикселей, границу 2px, margin 6px, padding 3px, будет выглядеть так: 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; } 
 
Float 1
Float 2
Float 3
  • Как получить img / src или a / hrefs с помощью Html Agility Pack?
  • Установите HTML-страницу в качестве обоев на Linux
  • Преобразование Word в HTML - Потеря качества изображения
  • У меня проблемы с главной страницей Google, результатами поиска, изображениями Google. Их показывают очень необычно. В чем причина этого?
  • LaTeX, HTML / CSS / XML или что-то еще, чтобы создать резюме?
  • Отображать содержимое XML на странице HTML
  • Есть ли функция автоматического отступа HTML или плагин для Sublime Text (aka prettify / beautify / format)?
  • HashSet по сравнению с словарем wrt время поиска, чтобы узнать, существует ли элемент
  • Какие рекомендации для дизайна электронной почты HTML существуют?
  • Переменные Javascript в атрибутах HTML
  • В браузере, как узнать, какой десятичный разделитель использует операционная система?
  • Давайте будем гением компьютера.