CSS: центральный элемент между плавающими элементами

Question

Довольно простой вопрос, но не похоже, чтобы найти решение. У меня есть 5 элементов: 2 плавающих влево, 2 плавающих справа. Предполагается, что пятый элемент находится в идеальном центре div (#infographic), независимо от ширины экрана.

пример:

1,2 - 3 - 4,5 или 1,2 ----- ----- 3 4,5

HTML-код:

<div id="infographic"> 
    <div class="icon-one"></div> 
    <p>me</p> 
    <div class="arrows"></div> 
    <p>customer</p> 
    <div class="icon-two"></div> 
</div> 

Любые предложения по получению элемента в центре?

Answer 1

Я думаю, это вывод, который вы ищете :

DEMO

html, body,p{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#infographic * { 
 
    width:10%; 
 
    height:30px; 
 
    background:teal; 
 
    padding:0; 
 
    margin:0 1%; 
 
} 
 
#infographic .icon-one, #infographic .icon-one + p { 
 
    float:left; 
 
} 
 
#infographic .icon-two, #infographic .icon-two + p { 
 
    float:right; 
 
} 
 
#infographic .arrows{ 
 
    margin:0 auto; 
 
    text-align:center; 
 
}

<div id="infographic"> 
 
    <div class="icon-one"></div> 
 
    <p>me</p> 
 
    <div class="icon-two"></div> 
 
    <p>customer</p> 
 
    <div class="arrows">arrows</div> 
 
</div>

Answer 2

Если 12 и 45 имеют фиксированную ширину, вы не можете достичь этого, используя css float, вместо этого вы должны использовать что-то вроде абсолютного позиционирования. Для получения дополнительной информации qive ссылку на вашу страницу в ее текущем состоянии или какой-либо еще код.

Answer 3

Попробуйте это:

Если у вас есть два плавали дивы, то вы знаете полей. Проблема заключается в том, что float: right div должен быть помещен перед средним div. Таким образом, в основном у вас будет:

левый плавучий | правоплавающие | центрированное

Теперь о полях: обычно вы можете использовать маржу: 0 авто, не так ли? Проблема в том, что прямо сейчас вы знаете значения полей: плавающие divs! Так что вам просто нужно использовать:

запас: 0 правый плавали ширина 0 левая плавали ширина

Это должно работать ...

См: this answer

Answer 4

Добавить position: relative чтобы контейнер .arrows был расположен абсолютно относительно контейнера. Поместите .arrows в центре контейнера с помощью top: 50% и left: 50% (проценты даны по отношению к контейнеру), а затем переместить .arrows немного в левом верхнем углу, используя transform: translate(-50%, -50%) (проценты даны по отношению к .arrows)

.arrows { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

См. http://codepen.io/ckuijjer/pen/rhEgy для примера или http://css-tricks.com/centering-css-complete-guide/ для полного руководства по горизонтальному/вертикальному центрированию.

Если это только о горизонтальной центровки вы могли бы даже быть в состоянии использовать

.arrows { 
    margin: 0 auto; 
} 

плавучие элементы принимаются за пределами нормального потока документов

Answer 5

Во-первых, она должна быть возможность группировать влево и правые элементы. Затем мы можем создать фальшивую оболочку, заполняющую весь контейнер. Если мы знаем ширину элемента, который будет центрирован, тогда он может быть центрирован с использованием поля.

<div id="infographic"> 
<div class='leftcol left'> 
    <div class="icon-one left">1</div> 
    <p class='left'>me</p> 
    <div class='clear'></div> 
</div> 
<div class='rightcol right'> 
    <p class='right'>customer</p> 
    <div class="icon-two right">2</div> 
    <div class='clear'></div> 
</div> 
<div class='center'> 
     <div class="arrows">A</div> 
</div> 
</div> 

CSS:

.left { 
float: left; } 
.right { 
float: right;} 

.center { 
    overflow: hidden; 
    position: absolute; 
    width: 100%; 
} 
.arrows { 
    margin: 0 auto; 
    display: block; 
    width: 30px; 
} 
.clear { 
    clear: both; 
} 
#infographic { 
    position: relative; 
} 

Если мы не знаем ширину центрированного элемента, посмотрите на вопрос Centering a div block without the width и применить решение там.

Обратите внимание, что представленное решение предполагает, что ширина центра никогда не будет настолько широкой, что она станет шире, чем две колонки слева и справа. Если вы хотите иметь гарантий, что вы должны установить максимальный процент ширины, как это (пример ограничивает каждую колонку на одну треть от общей ширины):

.leftcol .rightcol .arrows { 
    max-width: 33.3% 
}