sepoto Posted February 11, 2011 Share Posted February 11, 2011 Thank all of you so much for your past help. I know I must be on the tail end of figuring all this out. My problem is as stated in the subject line "vertical-align: middle; having no effect at all on my <DIV>". Again I apologize for having to ask so many questions but this journey through CSS has been more maddening than almost anything I have experienced. The area of concern in the code is at the image with the source attribute that contains "mainguy.jpg". I want "mainguy.jpg" to be aligned vertically and have not been able to accomplish that at all yet. I had to resort to using a few <br /> tags in order to move the image down the <div> from a top justified position. To keep it short here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"><html><head><title>Dating Guru</title><style> body { background-image: url(/imgindex/background.png); width: 1002px; margin-left: auto; margin-right: auto; border-style: solid; border-color: black; border-width: 1px; } th { overflow: hidden; } td { overflow: hidden; } table { border-collapse: collapse; } .div_mainguy { border-color: black; border-style: solid; border-width: 1px; overflow: hidden; vertical-align: middle; height: 400px; }</style></head><body><div align="center"><h2>Saturday Night Dating Guru</h2></div><br><div align="right"><a href="">Login</a> | <a href="">Sign Up</a></div><br><table align="center" width="1000px" height="400px" style='table-layout: fixed' border="1px" cellspacing="0" cellpadding="0"><col width="200px"><col width="600px"><col width="200px"><tr><td height="200px" align="center" valign="middle"> <table align="center" width="180px" height="180px" style='table-layout: fixed; border-color: brown;' border="5px" cellspacing="0" cellpading="0"> <tr><td></td></tr> </table></td><td height="50%" rowspan="2" align="center" valign="middle"><div class="div_mainguy"><br><br><br><img src="mainguy.jpg"></div></td><td height="50%"> <table align="center" width="180px" height="180px" style='table-layout: fixed; border-color: brown;' border="5px" cellspacing="0" cellpading="0"> <tr><td></td></tr> </table></td></tr><tr><td height="200px"> <table align="center" width="180px" height="180px" style='table-layout: fixed; border-color: brown;' border="5px" cellspacing="0" cellpading="0"> <tr><td></td></tr> </table></td><td height="50%"> <table align="center" width="180px" height="180px" style='table-layout: fixed; border-color: brown;' border="5px" cellspacing="0" cellpading="0"> <tr><td></td></tr> </table></td></tr></table></body></html> Link to comment Share on other sites More sharing options...
cousineaug Posted February 11, 2011 Share Posted February 11, 2011 I also have struggled with image centered vertically. I should sit back and wait for a more elegant answer. Here is a shortened demo that should be portable. I hate to go back to tables but it seems the only thing that works now.....unless you know the exact size of the container and the size of the image and you can use margins. Only tested in Chrome <html><head><style type="text/css">.outer { display: table; position: absolute; width: 100%; height: 100%; text-align: center; }.container { display: table-cell; vertical-align: middle; }</style></head><body ><div class="outer"><div class="container"><img src=".jpg" alt="" width="50" height="50" /></div></div></body></html> Link to comment Share on other sites More sharing options...
sepoto Posted February 11, 2011 Author Share Posted February 11, 2011 That was a great response. The key for me was the use of for me was to also to add 'display: table-cell' which I added to the style for the <div> that contains the <img>. Thanks a bunch! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.