vertically align for floated element

Question

I've the following markup:

<div id="all">
<div id="one">one</div>
<div id="two">two</div>
<div id="main">main para goes here</div>
</div>

and the following css:

#all{
    height: 300px;
    background: red;
}
#one{
    float: left;
}
#two{
    float: right;
}
#main{
    margin: 0 auto;
    width: 250px;
}

I wanted to align vertically but no success even after using pseudo technique. Vertical alignment should work at least ie8.

Please note: I can't change the markup. It means I can't avoid using float.

So, is there any way to make it success?

What pseudo technique? And what is the problem? Everything is vertically aligned ins't it? — putvande, Aug 18 '14 at 09:05
check this demo http://jsfiddle.net/ovkgzmdv/1/ which works but two is not floated to the right — Bhojendra Rauniyar, Aug 18 '14 at 09:08
Oldschool trick: First set all margins and paddings 0. Then #all with position:absolute to top:50% and with margin-top:-150px as the height of #all is known. http://jsfiddle.net/d0zcegsc/1/ — Axel Richter, Aug 18 '14 at 09:17
@AxelRichter I wanted to align it's content not container... — Bhojendra Rauniyar, Aug 18 '14 at 09:18
@C-linkNepal I could get it to work on IE9+ but to support IE8, is it allowed to use a percentage unit for the width of `#main`? instead of `250px`? to get rid of using `calc()` expression. — Hashem Qolami, Aug 18 '14 at 09:25

score 1 · Answer 1 · answered Aug 18 '14 at 09:08

1

Demo

Using flex-box

css

#all{
    height: 300px;
    background: red;
    display: flex;
    align-items:center
}
#one{
    float: left;
    order: 1;
}
#two{
    float: right;
    order: 3;
}
#main{
    margin: 0 auto;
    width: 250px;
    order: 2;
}

answered Aug 18 '14 at 09:08

4dgaurav

11,360
4
32
59

But OP want to support IE8 also :) – Suresh Ponnukalai Aug 18 '14 at 09:11
1

While true, it doesn't fit the OP's need: `Vertical alignment should work at least ie8.` – Hashem Qolami Aug 18 '14 at 09:11
http://caniuse.com/#search=flexbox FlexBox doesn't work on older browser versions. – Sven van Zoelen Aug 18 '14 at 09:12
1

+1 - To the best of my knowledge, this is currently the only way in CSS to vertically center a floated element. [Here are some other vertical centering methods](http://stackoverflow.com/a/20764040/703717), but only flexbox will center floats – Danield Aug 18 '14 at 09:32

score 1 · Accepted Answer · edited May 23 '17 at 11:49

Well, using CSS floats gives no chance to align the floated element vertically in their container (regardless of using CSS flexible box method).

Hence I'd go with inline-blocks so that I can align them by vertical-align: middle declaration.

So far so good, but the #two element must be positioned at the right side of the container without using CSS floats. Hence we have to specify width of the columns to reorder the columns via relative positioning:

To get this approach to work on IE8, we have to use percentage units for the width columns. Saying that we'll end up with:

EXAMPLE HERE

#all {
    height: 300px;
    width: 100%;

    font-size: 0; /* To remove the white-space between inline-block columns */
}

#all:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}


#one, #two, #main {
    display: inline-block;
    vertical-align: middle;
    position: relative;

    font-size: 16px; /* Reset the font-size to the default value */
}

#one, #two { width: 30%; }
#two { left: 40%; text-align: right; } /* Push the column to the right by 40% */
#main{ right: 30%; width: 40%; }       /* Pull the column to the left  by 30% */

This will work on IE8+ (not remember the requirements of IE6/7). However for IE9+ we can use calc() expression to specify the width of columns like so:

Example Here

#one, #two {
    width: calc((100% - 250px) / 2);
}

#two{
    left: 250px;
    text-align: right;
}
#main{
    right: calc((100% - 250px) / 2);

    width: 250px;
    background-color: orange;
}

score 0 · Answer 3 · answered Aug 18 '14 at 09:19

Using a bit of jquery and css you can easily center the elements that you want:

CSS

div{
    outline:solid gray 1px;
}
#all{
    height: 300px;
}
#one{
    float: left;
    position:relative;
}
#two{
    float: right;
    position:relative;
}
#main{
    margin: 0 auto;
    width: 250px;
    position:relative;
}

JS

function center(element){
            var all = $("#all");
            if(element.height()<all.height()){
                  element.css(
                      "top",
                      ((all.height()/2)-(element.height()/2))+"px"
                  );  
            }
}

center($("#one"));
center($("#two"));
center($("#main"));

FIDDLE

http://jsfiddle.net/ovkgzmdv/5/

Maybe in pure css I don't know, but this solution is such simple, why not use it ? — singe3, Aug 18 '14 at 09:23

vertically align for floated element

3 Answers3