sepoto Posted February 26, 2011 Share Posted February 26, 2011 I am trying to figure out why my vertical-align: middle; is not truly aligned to the middle. It appears to be offset quite a bit. I have reviewed my box model and I don't really see a problem (correct me if I am wrong). Does anyone see the solution here? I am a bit lost. Thank you! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style>table {table-loayout: fixed;width: 1102px;margin: 0;padding: 0;border-collapse: collapse;}td {border: solid 1px black;margin: 0;padding: 0;max-height: 102px;}#square {float: left;height: 100px;width: 100px;margin: 0;padding: 0;overflow: hidden;}</style></head><body><table><tr><td><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div><div id="square"><p id="" style='text-align: center; line-height: 98px;'>x</p></div></td></tr></table></body></html> Link to comment Share on other sites More sharing options...
Fmdpa Posted February 26, 2011 Share Posted February 26, 2011 table-loayout ??? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 26, 2011 Share Posted February 26, 2011 Its because p have a default margin, and this is what is throwing off the vertical alignment. So by setting the paragraph margin to zero, and setting the line-height to the height of its container, it should fix this problem. Link to comment Share on other sites More sharing options...
Ingolme Posted February 26, 2011 Share Posted February 26, 2011 You can only have one element with the same ID. Instead of using IDs, try classes instead. <div class="square!> Link to comment Share on other sites More sharing options...
sepoto Posted February 26, 2011 Author Share Posted February 26, 2011 Wonderful replies as always. That's why I love this forum. Thanks again. Best of luck in your en devours. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.