CSS: center element between floating elements

Question

Pretty simple question, but can't seem to find the solution. I have 5 elements: 2 floating left, 2 floating right. The fifth element is supposed to be in the perfect center of the div (#infographic), no matter what the screen width is.

example:

1,2 -- 3 -- 4,5 OR 1,2 ----- 3 ----- 4,5

HTML code:

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

Any suggestions to get the element in the center?

Which ones does have a static with and which a dynamic with? — Andreas Furster, Nov 01 '14 at 10:30
An easy option is the place the middle element last in the HTML and float the others left and right ... but that may not suit you. This is also a good use case for flexbox ... but you'd then lack support in older browsers. — ralph.m, Nov 01 '14 at 10:43

score 2 · Accepted Answer · answered Nov 01 '14 at 11:06

I guess this is the output you are looking for :

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>

score 0 · Answer 2 · answered Nov 01 '14 at 10:39

0

If 12 and 45 have fixed width you can not achieve this using css float, you must use something like absolute positionning instead. For more information qive a link to your page in its current state, or some more code.

answered Nov 01 '14 at 10:39

Romain

573
3
8

score 0 · Answer 3 · edited May 23 '17 at 12:20

Try this:

If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:

left-floated | right-floated | centered

Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:

margin:0 right-floated-width 0 left-floated-width

That should work...

See: this answer

score 0 · Answer 4 · answered Nov 01 '14 at 10:56

Add position: relative to the container to allow the .arrows to be positioned absolutely relative to the container. Position the .arrows at the center of the container by using top: 50% and left: 50% (the percentages are relative to the container) and then move the .arrows a bit to the top left by using transform: translate(-50%, -50%) (percentages are relative to the .arrows)

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

See http://codepen.io/ckuijjer/pen/rhEgy for an example or http://css-tricks.com/centering-css-complete-guide/ for a complete tutorial on horizonal/vertical centering.

If it's only about horizontal centering you might even be able to use

.arrows {
    margin: 0 auto;
}

as floating elements are taken outside of the normal document flow

score 0 · Answer 5 · edited May 23 '17 at 12:05

First, it should be possible to group the left and right floated elements together. What we can then do is create a 'fake' wrapper that fills up the entire container. If we know the width of the element to be centered, this can then be centered using a margin.

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

If we do not know the width of the centered element, take a look at the question Centering a div block without the width and apply the solution there.

Note that the solution presented assumes that the center width is never so wide that it will become wider than the two columns on the left and the right. If you want to have safeguards for that you should set a maximum width percentage like so (the example restricts each column to one-third of the total width):

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

CSS: center element between floating elements

5 Answers5