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... Link to comment https://forums.phpfreaks.com/topic/20166-floating-in-tables/ 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] Link to comment https://forums.phpfreaks.com/topic/20166-floating-in-tables/#findComment-88701 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. Link to comment https://forums.phpfreaks.com/topic/20166-floating-in-tables/#findComment-88750 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.