effigy Posted September 8, 2006 Share Posted September 8, 2006 I'm having some troubles with [b]float[/b]; screenshot and simplified code are below. I want "Heading" to be horizontally and vertically centered.[URL=http://img428.imageshack.us/my.php?image=floatrc4.jpg][IMG]http://img428.imageshack.us/img428/4577/floatrc4.th.jpg[/img][/URL][code]<html><head><style type="text/css">* { color: black; font-family: arial; font-size: 12px;}table, td, span { border: 1px gray solid;}td { padding: 4px 8px; text-align:center; /* this does not work; bottom doesn't even work either */ vertical-align: middle;}span { float: right;}</style></head><body> <table width="500"> <tr> <td> <span> <img src="http://www.phpfreaks.com/forums/Themes/default/images/topic/my_normal_post.gif"/> </span> Heading </td> </tr> <tr> <td> | </td> </tr> <tr> <td> Notice how "Heading" is not centered horizontally or vertically. </td> </tr> </table></body></html>[/code]Is the fact that I'm in a table causing the problem? [b]Update:[/b] I can't seem to get it working in a div either... Quote Link to comment Share on other sites More sharing options...
effigy Posted September 8, 2006 Author Share Posted September 8, 2006 I had to result to the negative-margin thing again; this is working:[code]<html><head><style type="text/css">* { color: black; font-family: arial; font-size: 12px;}table, td, th, span { border: 1px gray solid;}span { border-color: red;}td { padding: 4px 8px; text-align: center;}th { text-align: left;}span.heading { display: block; position: relative; top: 0px; left: 50%; margin-left: -200px; width: 400px; height: 100%; text-align: center; line-height: 2;}span.iconbar { float: right;}</style></head><body> <table width="500"> <tr> <th> <span class="iconbar"><img src="my_normal_post.gif"/></span> <span class="heading">Heading</span> </th> </tr> <tr> <td> | </td> </tr> <tr> <td> Notice how "Heading" <i>is</i> centered horizontally and vertically. </td> </tr> </table></body></html>[/code] Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted September 8, 2006 Share Posted September 8, 2006 you could always give that table element an id and use that to set the background image in teh css. That way the image will never interfee with your layout and your page may even download a few nanoseconds quicker. 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.