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…
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
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.
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.
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).
You must be logged in to reply to this topic.