Lisa23 Posted December 18, 2011 Share Posted December 18, 2011 Hi i have been 4 divs with a height set and now i am trying to set the text to be vertical align:middle but it is not working on explorer 6 and 7 is that even possible or should i just use some <br /> tags to align the text on each div to display align in the middle. I have found some that uses css top:50% but those just set line point to text to start which is not what i wanti want to be able to use vertical-align inside a set div without stype top <div class="comments_outer"> <div class="comments_inner"> <p>"The quality of the product is first class,since adding a HDTV portal to our website our hits are up 4000 a month! 20 new instructions, with 20 new delighted clients deciding to have their home filmed in order to sell it,brilliant." </p> </div> </div> .comments_outer { float:left; display:table; height: 160px; width: 208px; vertical-align: middle; } .comments_inner { display:table-cell; vertical-align:middle; border-right:2px solid #000; border-bottom:2px solid #000; } .class_without_border .comments_inner{ border-right:none; } .class_without_border{ width: 206px;} .comments_outer p { color: #515151; font-size: 11px; font-style: italic; font-weight: bold; padding:10px; } .comments_author p {color: #515151; font-size: 12px; font-style: italic; font-weight: bold;} Quote Link to comment Share on other sites More sharing options...
Frank P Posted December 18, 2011 Share Posted December 18, 2011 i am trying to set the text to be vertical align:middle but it is not working on explorer 6 and 7 is that even possible You can set it, but it won't work, in any browser. Vertical:align only works in table cells and on inline elements such as images. Now, you could turn a div into a table cell by means of display:table-cell, but that still won't work in IE6/7. What you can do to cross-browser vertically center text is use line-height. That goes as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div { width: 200px; height: 200px; border: 1px solid black; text-align: center; font: normal 0.8em Arial; line-height: 200px; } h3 { margin-top: 0; } </style> </head> <body> <div><h3>Centered text</h3></div> </body> </html> For all text tags (h, p, etc.) you have to set margin-top:0;. Which is a good idea anyway, to even out browser differences in text positioning. Quote Link to comment Share on other sites More sharing options...
Lisa23 Posted December 18, 2011 Author Share Posted December 18, 2011 Hi thanks for the help on my code above i did set the div as (.comments_inner { display:table-cell; vertical-align:middle; border-right:2px solid #000;) the only problem on my code is that it doesnt set the div height every works fine except the height of the div on exploere 6 and 7 the vertical works but the it cant set a certain height on the div i can set width but not height. is there a twist on my code to get it to work?? Quote Link to comment Share on other sites More sharing options...
Frank P Posted December 18, 2011 Share Posted December 18, 2011 Sorry, I was too quick and thus missed the whole inner div thing. But you can set the height of the outer div, can't you? Then just give the inner div a height:inherit and a line-height:inherit. Like so: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#outer { width: 200px; height: 200px; line-height: 200px; border: 1px solid black; } div#inner { width: inherit; /* because of the float, which may give it a shrink-wrap */ height: inherit; line-height: inherit; text-align: center; font: normal 0.8em Arial; } h3 { margin-top: 0; } </style> </head> <body> <div id="outer"> <div id="inner"><h3>Centered text</h3></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Lisa23 Posted December 18, 2011 Author Share Posted December 18, 2011 once again thanks for the help the height:inherit; almost did the job but now the problem is it doesnt pick up vertical-align: middle; i tried inherit that too but no effect this how my css looks like .comments_outer { float:left; display:table; height: 160px; width: 206px; vertical-align: middle; border-bottom:2px solid red; border-right:2px solid red; } .comments_inner { display:table-cell; height:inherit; vertical-align: inherit; } <div class="comments_outer class_without_border"> <div class="comments_inner"> <p>meant to vertical center center</p> </div> </div> Quote Link to comment Share on other sites More sharing options...
Frank P Posted December 18, 2011 Share Posted December 18, 2011 once again thanks for the help the height:inherit; almost did the job but now the problem is it doesnt pick up vertical-align: middle; i tried inherit that too but no effect this how my css looks like I told you to use line-height in stead of vertical-align. Why didn't you do that?? Quote Link to comment Share on other sites More sharing options...
Lisa23 Posted December 18, 2011 Author Share Posted December 18, 2011 line height just seems to increase gap bettwen the line of the text imense this is the page if you scroll down you see the how long the line height made it http://www.homeonfilm.com/agentstest.php this the css i got .comments_outer { float:left; display:table; width: 206px; border-bottom:2px solid red; border-right:2px solid red; } .comments_inner { display:table-cell; height:inherit; line-height:160px; } Quote Link to comment Share on other sites More sharing options...
Frank P Posted December 18, 2011 Share Posted December 18, 2011 But what's wrong with this method then, that you seemingly already know, since that is the first Google hit of the search string 'how to center vertically css', and since you wrote: "I have found some that uses css top:50%"? It centers the text perfectly, also in IE7. Quote Link to comment Share on other sites More sharing options...
Lisa23 Posted December 18, 2011 Author Share Posted December 18, 2011 No if you get the chance if you look on it on firefox you'll see the text inside the divs they just like floating in the middle of the div like but on 7 it like the vertical align doesnt work the text starts on the same level which is meant to look like on firefox. the div at bottom with red borders, on firefox vertical works but on ie7 or ie6 the vertical doesnt work http://www.homeonfilm.com/agentstest.php Quote Link to comment Share on other sites More sharing options...
haku Posted December 19, 2011 Share Posted December 19, 2011 Hi thanks for the help on my code above i did set the div as (.comments_inner { display:table-cell; vertical-align:middle; border-right:2px solid #000;) display:table-cell doesn't work in IE 6-7 Quote Link to comment Share on other sites More sharing options...
Frank P Posted December 20, 2011 Share Posted December 20, 2011 Sorry to say Lisa, but the way I see it, you've been given all the information that you need. There is a cross-browser way to have the text vertically centered -- the link I last gave you. I don't understand why you are not using that. Quote Link to comment Share on other sites More sharing options...
Lisa23 Posted December 20, 2011 Author Share Posted December 20, 2011 Hi i did see the link you gave me and i really appreciate the help you gave me yes i think i will use that method thank you very much for everything Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.