CSS Vertical-align challenge

[begetolo]

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]

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]

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

[Paulie_D]

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]

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

[Anonymous]

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]

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

[Anonymous]

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]

@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]

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

[begetolo]

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]

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

[Anonymous]

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

However, see this article by Chris:
https://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.

[Anonymous]

@joshuanhibbert As would I!

[Chris Coyier]

I don’t feel quite as strongly about it. I do stick to the sentiment that if you just use a bunch of divs and set their display properties to the various table stuff and think you’re being “more semantic” that’s still a little ridiculous. But these days, those elements might actually be HTML5 semantic elements and that would be a bit of a help. Then with media queries, if you go changing around the display properties, it probably makes the most sense to start with divs (e.g. at widest width perhaps display: table is useful, but you switch to flexbox for mobile or something like that).

[Author]

Posts