Grow your CSS skills. Land your dream job.

CSS Vertical-align challenge

  • # December 12, 2012 at 10:58 am

    I would to like accomplish the following:
    I have 5 divs floated:left.
    Div 1,3 and 5 have an image
    Div 2 and 4 just text.
    I would like to vertical center the text.

    see: http://codepen.io/begetolo/pen/nHqID

    Ofcourse i could do a margin top on the text divs, but that wouldn’t work. It should be responsive…

    Any ideas?

    # December 12, 2012 at 11:30 am

    From my reading it does look as though the imagebox/textbox divs will need to have a specified height.

    Will that be an issue?

    # December 12, 2012 at 11:55 am

    Yes it would, because then it would no longer be responsive….

    # December 12, 2012 at 12:02 pm

    Then as far as I can tell, you’re going to have a problem given the proposed structure.

    A JS solution would seem to be optimal.

    # December 12, 2012 at 12:25 pm

    THX Paulie_D. JS is an option, but i would like to do this with just CSS. Looks like such simple problem with a really simple solution….

    # December 12, 2012 at 12:28 pm

    One method you could use is set the five divs to display: inline-block; and vertical-align: middle;.

    Only issue with this method is support in older versions of IE. That said you could just make float a fallback for IE and call it a day!

    Let me know if you have issues, but I’m 90% certain this will work.

    EDIT: One thing to note about this method is it will added extra spaces between your divs. Simply set the div wrapping those five divs to font-size: 0; and it should solve that problem.

    Got it working based off your example pen: http://codepen.io/TheDark1105/pen/zfqam

    # December 12, 2012 at 12:49 pm

    @Eric, thanks. I’ll have a look at that.
    @TheDark12. I already used this solution, but then the div’s are all equal in size. That’s just the ‘problem’.

    # December 12, 2012 at 2:13 pm

    Ok, so you want dynamic width and vertical alignment in the middle?

    In this case, instead of trying to find some oddball CSS solution that may or may not work/look the same in every browser why not just use a table?

    Web developers treat them like the plague, but in cases like this where it just makes perfect sense don’t hesitate to use them.

    # December 12, 2012 at 4:03 pm

    @TheDark12 A table would be the way to go, i think. Thanks very much for your help. Much appreciated.
    I didn’t think about that, because it’s ages ago when i last used a table. I’ll give it a try. :)

    # December 12, 2012 at 4:12 pm

    Table looks great for this solution
    http://codepen.io/begetolo/pen/nHqID
    Thanks again for the help.

    # December 12, 2012 at 5:15 pm

    @begetolo Semantics schemantics right?

    But seriously, ditch the tables and use the display: table; property. Using tables for styling has been, and always will be, a terrible idea.

    # December 12, 2012 at 6:09 pm

    I won´t copy and paste this pen in my project for sure. I just use CodePen to fiddle. See if things work. Now i see it works, i will adapt the idea. But thanks for your suggestion display:table;

    # December 13, 2012 at 2:28 am

    @begetolo.. you can use this code, its working fine for me…!!


    height:150px; width:150px; background:#efefef; text-align:center; display:table-cell; vertical-align:middle;
    # December 13, 2012 at 10:57 am

    Less browser support to be clear, but display: table; and display: table-cell; are also a solution.

    However, see this article by Chris:
    http://css-tricks.com/css-tables-are-not-a-solution/

    I agree with him in this case. Granted while personally I would never use a table for layout, to get the exact functionality that @begetolo needs a table is the best solution. :)

    And honestly there just isn’t one ‘right’ way to go about it. Just go with a solution that you’re comfortable with.

Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".