begetolo

# 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?

Paulie_D

# 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?

begetolo

# December 12, 2012 at 11:55 am

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

Paulie_D

# 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.

begetolo

# 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….

Eric

# December 12, 2012 at 12:27 pm

Just do this http://www.visibilityinherit.com/code/css-vertically-center-unknown-height.php

TheDark12

# 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

begetolo

# 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’.

TheDark12

# 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.

begetolo

# 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. :)

begetolo

# December 12, 2012 at 4:12 pm

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

joshuanhibbert

# 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.

begetolo

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

dhiruSingh

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

TheDark12

# 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.