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 want i have attached an example of how i want to achieve with css that is if it is possible the more dirty option i am thinking is just to align with break tags each text within the divs thanks in advance
If your outter div container has a fixed height, use line-height <div class="outter"> <div class="inner"> text1<br /> text2<br /> text3 </div> </div> Code (markup): .outter { height: 30px; } .inner { line-height: 30px; } Code (markup):
Thanks for the help unfortunaly line height just increases the gap bettwen the text if you look at my link the divs at bottom in red on firefox you'll see the text floats vertical:middle nicely but on ie7 and ie6 the vertical align doesnt work http://www.homeonfilm.com/builderstest.php
vertical-align is used to set alignment of inline content within that box, not to align text to a parent box. Setting line-height is not what you want either. I'm not giving this any thought at all cause you aren't supplying any markup but look into setting padding on the parent element.
remove from the outter div the display: table; and vetical-align: middle; for the inner div, remove all 3 css value, and just use line-height: 160px; never had issues with this
Hi just removed all the above you mention but just looks horrible wrong this is how my css looks like .comments_outer { float:left; height:160px; width: 206px; border-bottom:2px solid red; border-right:2px solid red; } .comments_inner { line-height: 160px; } Code (markup): the HTML <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> Code (markup):
It is possible to "blindly" vertical centre (without a height on the content) in old IE browsers plus modern browsers, using the method of Paul O'Brien: http://pmob.co.uk/pob/hoz-vert-center.htm An example is below. Note that it needs extra markup (the inner2 and inner3 divs), plus styling for them, plus conditional comments directed to IE6-7 for them. Conversely, if IE6 & 7 are to be ignored, just delete the inner2 and inner3 divs, plus their styling and conditional comments. It seems like a lot to do just because IE6-7 don't understand display:table and display:table-cell, but it works. You can add or remove content from those inner <p> elements, and their content is always vertically centred, without ever having to put or change a height on them or their immediate parents. And as said above, setting the line height of an element equal to the height of its parent only allows vertical centring for 1 line of inline content, and does not work for block level elements. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Test Vertical Centre</title> <style type="text/css"> html, body { height: 100%; width: 100%; font-size: 100%; } #wrapper { width: 26em; margin: 0 auto; overflow: hidden; font: 1em Arial, sans-serif; line-height: 1.1; } .comments_outer { float:left; display: table; vertical-align: middle; height:12em; width: 12em; border:1px solid red; } .comments_inner { display:table-cell; vertical-align:middle; } .inner1 { position:relative; left:50%; float:left; } .inner2 { position:relative; left: -50%; background-color: #ccc; } </style> <!--[if lt IE 8]> <style type="text/css"> .inner1 { top:50% } .inner2 { top:-50%; } </style> <![endif]--> </head> <body> <div id="wrapper"> <div class="comments_outer"> <div class="comments_inner"> <div class="inner1"> <div class="inner2"> <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> </div> </div> <div class="comments_outer"> <div class="comments_inner"> <div class="inner1"> <div class="inner2"> <p>"The quality of the product is first class,since adding a HDTV portal to our website our hits are up 4000 a month!"</p> </div> </div> </div> </div> </div> </body> </html> Code (markup):
The valign tag is a bummer. Doesn't always work and doesn't work on all browsers. I suggest you use: float: left / right, and play with the margin and padding for the div and set specific browser definitions if needed with 'if IE' tag. Good luck
I hope in IE6 is not possible but in IE7 it can be possible div{display:table-cell; vertical-align:middle}. for compatible for IE6 you need to use some jquery stuff. You need to replace tag of div into table structure. So that your code will be in div and in ie6 get table structure.