- This topic is empty.
-
AuthorPosts
-
December 12, 2012 at 10:58 am #41297
begetolo
ParticipantI 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?
December 12, 2012 at 11:30 am #117001Paulie_D
MemberFrom my reading it does look as though the imagebox/textbox divs will need to have a specified height.
Will that be an issue?
December 12, 2012 at 11:55 am #117006begetolo
ParticipantYes it would, because then it would no longer be responsive….
December 12, 2012 at 12:02 pm #117009Paulie_D
MemberThen 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.
December 12, 2012 at 12:25 pm #117013begetolo
ParticipantTHX 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….
December 12, 2012 at 12:28 pm #117015Anonymous
InactiveOne 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 12:49 pm #117023begetolo
Participant@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’.December 12, 2012 at 2:13 pm #117030Anonymous
InactiveOk, 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 12, 2012 at 4:03 pm #117060begetolo
Participant@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. :)December 12, 2012 at 4:12 pm #117061begetolo
ParticipantTable looks great for this solution
http://codepen.io/begetolo/pen/nHqID
Thanks again for the help.December 12, 2012 at 6:09 pm #117084begetolo
ParticipantI 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;
December 13, 2012 at 2:28 am #117183dhiruSingh
Member@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;
December 13, 2012 at 10:57 am #117233Anonymous
InactiveLess 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.
December 13, 2012 at 4:32 pm #117296Anonymous
Inactive@joshuanhibbert As would I!
December 13, 2012 at 5:07 pm #117300Chris Coyier
KeymasterI 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).
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.