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.
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.
@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 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. :)
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;
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).
I guess the question now is what exactly @begetolo is using this for.
If it's for layout (say something like columns in the footer), and the site is responsive, display: table; would be the clear victor because of the lack of true control over table cells.
If however he is making a static width side and is using this to display content on a page instead of to assemble the layout of said page, I stand by using a table instead of a div with display: table;. It's truly what the table was designed for.
To clarify where I want to use it, take a look at this site: http://www.rbk.nl. This site is in development and there still many little things to do. Have look and please do give advice and/or tips...
The last image on the page is 'The One'.
Now it is just one big image. I have to make the individual (square) pieces click-able and therefore have to break the big image in smaller pieces. The '+' and the '=' could then be just plain text with a color and vertical centered. I need to keep the site responsive.
Perhaps one of you have another solution or idea how to approach this? For now i'm leaning towards jQuery, but just plain CSS would be better i think. I tried the 'table' option, but this breaks in IE8. (there are very much problems with tables in IE8, especially where TD width is concerned).
I haven't tried display:table yet.
Welp, traditional tables are certainly out of the question here. I think display: table; will be best as the site is going to be responsive... more freedom as the display gets smaller.
Let us know if you need any help implementing that method!
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?
From my reading it does look as though the imagebox/textbox divs will need to have a specified height.
Will that be an issue?
Yes it would, because then it would no longer be responsive....
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.
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....
Just do this http://www.visibilityinherit.com/code/css-vertically-center-unknown-height.php
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
@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'.
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.
@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. :)
Table looks great for this solution http://codepen.io/begetolo/pen/nHqID Thanks again for the help.
@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.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;
@begetolo.. you can use this code, its working fine for me...!!
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.
@TheDark12 That article is a few years old now. I'd be interested to see if @chriscoyier's opinion has changed at all.
@joshuanhibbert As would I!
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).
I guess the question now is what exactly @begetolo is using this for.
If it's for layout (say something like columns in the footer), and the site is responsive, display: table; would be the clear victor because of the lack of true control over table cells.
If however he is making a static width side and is using this to display content on a page instead of to assemble the layout of said page, I stand by using a table instead of a div with display: table;. It's truly what the table was designed for.
Thanks for the input @chriscoyier!
@TheDark12 You mean that displaying tabular data is truly what the table was designed for?
Also, somewhere to place plates of food when sitting down to eat ;)
@chriscoyier I have a couple of examples of when I think
display: table;is a good idea:Firstly, equal height columns: http://jsfiddle.net/joshnh/7sff8/
Secondly, to have a couple of grid elements (or columns) balance themselves horizontally. See the statistics: http://jsfiddle.net/joshnh/nEtAn/
To clarify where I want to use it, take a look at this site: http://www.rbk.nl. This site is in development and there still many little things to do. Have look and please do give advice and/or tips...
The last image on the page is 'The One'. Now it is just one big image. I have to make the individual (square) pieces click-able and therefore have to break the big image in smaller pieces. The '+' and the '=' could then be just plain text with a color and vertical centered. I need to keep the site responsive.
Perhaps one of you have another solution or idea how to approach this? For now i'm leaning towards jQuery, but just plain CSS would be better i think. I tried the 'table' option, but this breaks in IE8. (there are very much problems with tables in IE8, especially where TD width is concerned). I haven't tried display:table yet.
Thanks very much for your time.
Welp, traditional tables are certainly out of the question here. I think display: table; will be best as the site is going to be responsive... more freedom as the display gets smaller.
Let us know if you need any help implementing that method!
@joshuanhibbert http://i.imgur.com/xIwQS.gif ;)
http://codepen.io/wolfcry911/pen/GtFgl
...and there you have it. No table settings required at all.
If only we'd had the link to start with. :)
@TheDark12 That one actually made me laugh out loud! :D
Thanks everybody for your help. And have nice holidays and a good 2013 (bit early...)
Implemented! http://www.rbk.nl Thanks again. Especially @wolfcry911 for a complete example.