Vertically align middle without knowing the height

Question

<div class="grid-960">
    <div class="row content">
        <div class="col col-6-12">
            <img src="imgs/image.jpg" alt="img"/>
        </div>
        <div class="col col-6-12 last">
            <h2>Title1</h2>
            <p>My content</p>
        </div>
    </div>
</div>

My problem:

Yes I know how to vertically align most content. I've used many techniques, for example setting the parent as table and the child as table-cell. However most techniques requires me to either know the height of the parent/child - or they assume you are working with a block element.

I am working with a floated element, and I don't know the height of it(dynamic content).

.col{float:left}

Basically I need the elements on the right col vertically align with the image on the left. Because my columns float left, 100% height will have no effect.

Any ideas?

*By the way, I am not sure why my code never display's correctly here. I can't seem to get the indents to work.

You don't need to keep it as float:left, do you? Why not remove the float and do it as a table-cell structure? — andi, Aug 12 '13 at 20:45
But you don't need a fixed height with display: table / cell. Also this seems to be a dupe: http://stackoverflow.com/questions/5412912/align-vertically-using-css-3 — nice ass, Aug 12 '13 at 20:46
@andi - Yes I need to keep it as float, for responsive design purpose. It's a grid. — , Aug 12 '13 at 20:53
@onetrickpony - because the col div is floated, the height of the element will be as tall as itself, therefore, it won't stretch to the height of it's parent. — , Aug 12 '13 at 20:54
@gdaniel - I am pretty sure this cannot be done with pure CSS, unless you remove the float. — andi, Aug 12 '13 at 20:57

score 4 · Answer 1 · answered Aug 12 '13 at 21:25

You could still use vertical-align: middle and display: table-cell if you wrap your .cols within two DIVs that use table display mode.

.wrap-1{
  display: table;
  min-height: 100%;   /* extend table height to min. 100% of the floated elm. */
}

.wrap-2{
  display: table-row;
}

.col{
  display: table-cell;
  vertical-align: middle;
}

And another way, using flexboxes:

.row{
  float:left; 

  display: -webkit-flex;    
  display: -ms-flexbox;
  display: flex;

  -webkit-align-items: center;    
  -ms-flex-align: center;
  align-items: center;   
}

Shivam · Accepted Answer · 2013-08-12T21:16:08.580

0

You can do this easily using jQuery:

(function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = Math.ceil((ph-ah) / 2);
            $(this).css('margin-top', mh);
        });
   };
})(jQuery);

$('.classname').vAlign();

Source: http://atomiku.com/2012/02/simple-jquery-plugin-for-vertically-centering/

UPDATE

Possible CSS solution: jsFiddle

<div class="parent">
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam blanditiis optio aliquam voluptas adipisci itaque repellendus voluptatum magni vel nam sequi hic voluptatem perferendis deleniti labore aliquid incidunt officiis magnam.</div>
</div>

.parent {
    width:300px;
    padding:50% 0;
    border:1px solid black;
    float:left;
}
.child {
    margin:0 auto;
    border:1px solid black;
}

edited Aug 12 '13 at 21:16

answered Aug 12 '13 at 20:51

Shivam

2,208
3
24
39

@Shivam... I know how to achieve this with jquery. I just really wanted to achieve this with css. Thanks though! – Aug 12 '13 at 20:55
@gdaniel take a look at this, maybe it might help? http://stackoverflow.com/questions/8997500/vertical-centering-of-div-without-javascript-when-divs-height-isnt-fixed – Shivam Aug 12 '13 at 21:00
the example you linked above, only works because they have the parent height set. Thanks for your help though. I think I will resort to jquery. – Aug 12 '13 at 21:04
Try removing the `set height` from `parent div` and set a `padding-top` & `padding-bottom` to 50%. Example: http://jsbin.com/uvodop/22/edit – Shivam Aug 12 '13 at 21:08
Adding equal padding works most of the time, depending on the height of the parent. But I think I will use this, since my parents div will mostly have the same height (even though it's not explicitly set). You can either update your answer, or post a new one and I will close it. – Aug 12 '13 at 21:17
I updated my answer. Hopefully this could be some what helpful :). Its difficult to really only use CSS to vertical align a div unless using table-cell etc... but yeah, good luck on your project! – Shivam Aug 12 '13 at 21:21

Vertically align middle without knowing the height

2 Answers2