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.
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 12:27 pm
This reply has been reported for inappropriate content.# 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 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 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:
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.
You must be logged in to reply to this topic.