Три плавающие дивы центрированные по середине одного

Question

|-------------------A-------------------| 
|          | 
|  |---B--| |-C-| |------D----| | 
|          | 
|          | 
|          | 
|          | 
|---------------------------------------| 

Здравствуйте,

У меня есть CSS вопрос. На моей странице есть область заголовка, в которой есть фон изображения (A), и на нем есть три плавающих div (B-D). Фон шире, чем фактическая ширина страницы, поэтому я решил разместить его как div (в нижнем z-index) для себя, а не как фоновое изображение для контейнера div.

Я сделал JSFiddle, чтобы продемонстрировать: http://jsfiddle.net/7Lxgk44z/

Для лучшей демонстрации я добавил фон цвет.

Моя проблема заключается в том, что B и D имеют переменную длину текста, а сама ширина страницы также гибкая (изящно реагирует на меньшие размеры экрана), но на рабочем столе мне нужно, чтобы C был точно горизонтально центрирован с A. Как можно Я этого добиваюсь?

Для большей ясности: что касается меньших размеров экрана (например, планшета или телефона), я начинаю скрывать B и D, в зависимости от того, какое устройство используется.

Благодаря

Answer 1

Существует ваше решение:

jsfiddle.net/0c928ho6/1

#A { z-index: 1; height: 300px; min-width: 980px; max-width: 1280px; width: 100%; overflow:hidden; position: absolute; top: 0; display: block; margin: 0 auto; background-color: red; } 
 

 
#BCD { text-align: center; z-index: 3; width: 980px; height: 250px; position: relative; display: block; margin: 0 auto; background-color: gray;} 
 

 
#B { display: inline-block; height: 30px; padding: 10px; background-color: orange; } 
 
#C { display: inline-block; width: 250px; height: 150px; margin: 0 10px; padding-top: 10px; background-color: green; } 
 
#D { display: inline-block; height: 30px; padding: 10px; background-color: yellow; } 
 

 
.bdcouter { 
 
    display: inline-block; 
 
    margin-left: 60px;}

<div id="A"> 
 
    <div id="BCD"> 
 
     <div class="bdcouter"> 
 
      <div id="B">Lorem ipsum dolor</div> 
 
      <div id="C">[IMAGE]</div> 
 
      <div id="D">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> 
 
     </div> 
 
    </div> 
 
</div>

Вы можете .bdouter удалить и добавить его CSS Params в . Но я думаю, что это лучше.

Answer 2

Вы можете выровнять родитель center и установить ребенок display: inline-block вместо float.

#BCD {text-align: center} 
#B, #C, #D {display: inline-block} 

http://jsfiddle.net/7Lxgk44z/2/

Answer 3

Предлагает

• добавить float: left в левый блок
• добавить float: right в правый блок
• добавить display: inline-block в центральном блоке
• добавить text-align: center в обертке

http://jsfiddle.net/7xpg45rp/

И замечание: Не используйте position absolute таким образом. Лучший способ создать нижний блок, который будет красным. И используйте position: absolute для нижнего блока

Answer 4

Посмотрите на this fiddle. Это делает C div всегда выровненным в центре, а остальные блоки выравниваются по нему в соответствии с вашим запросом.

#A { 
    z-index: 1; 
    height: 300px; 
    min-width: 980px; 
    max-width: 1280px; 
    width: 100%; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    display: block; 
    margin: 0 auto; 
    background-color: red; 
} 
#BCD { 
    z-index: 3; 
    width: 980px; 
    height: 250px; 
    position: relative; 
    display: block; 
    margin: 0 auto; 
    background-color: gray; 
} 
#B { 
    position: absolute; 
    right: 50%; 
    margin-right: 135px; 
    height: 30px; 
    padding: 10px; 
    background-color: orange; 
} 
#C { 
    position: absolute; 
    width: 250px; 
    height: 150px; 
    margin-left: -125px; 
    left: 50%; 
    background-color: green; 
} 
#D { 
    position: absolute; 
    height: 30px; 
    left: 50%; 
    margin-left: 135px; 
    padding: 10px; 
    background-color: yellow; 
}