By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,663 Members | 1,337 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,663 IT Pros & Developers. It's quick & easy.

Center Image Vertically

P: 8
Can some body help me vertically center an image using CSS?
The customer only uses IE, and so the code is not debugged for other browsers!
The image in question is found on line 1075 : "div.layout_img img"
The image size is unknown

I have tried to use the "margin:0px auto;" method with no success.

I include the code here

Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>Test Page</title>
  6.     <style type="text/css">
  7.                     body {margin:0px; padding:0px; font-size:12px; line-height:16px; font-family:arial; background-color:white; }
  8.                     img {border:0px; display:block; }
  9.  
  10.                     /* Sheet */
  11.                     div.sheet {height:840px; width:1485px; border:1px solid #999; margin:15px; }
  12.                     div.sheet_hdr {height:51px; width:100%; }
  13.                     div.sheet_bdy {height:624px; width:100%; border-top:1px solid #999; border-left:1px solid #999; }
  14.                     div.sheet_ftr {height:163px; width:100%; }    
  15.  
  16.                     div.row {clear:both; }
  17.                     div.cell {float:left; text-align:center; border-right:1px solid #999; border-bottom:1px solid #999; height:100%; overflow:hidden; }
  18.                     div.hdr {font-weight:bold; text-transform:uppercase; border-bottom:2px solid #999; background-color:#eee; }
  19.  
  20.                     /* Logo */
  21.                     div.logo_table {height:50px; width:100%; border-top:1px solid #999; border-left:1px solid #999; }
  22.                     div.logo_img {width:201px; height:50px; }
  23.                     div.logo_img img {width:200px; height:49px; }
  24.                     div.logo_title {width:1281px; height:50px; font-weight:bold; font-size:18px; line-height:49px;}
  25.  
  26.                     div.sheet_title {width:100%; line-height:25px; clear:both; border-bottom:1px solid #999; }
  27.  
  28.                     /* Layout */
  29.                     div.layout_img {width:1482px; height:599px; border:1px solid #999; }
  30.                     div.layout_img img {text-align:center;}
  31.  
  32.                     /* History */
  33.                     div.history_table {height:104px; width:100%; border-top:1px solid #999; border-left:1px solid #999; }
  34.                     div.history_date {width:120px; }
  35.                     div.history_issue {width:40px; }
  36.                     div.history_version {width:160px; }
  37.                     div.history_description {width:962px; }
  38.                     div.history_planner {width:100px; }
  39.                     div.history_manager {width:100px; }
  40.  
  41.                     /* Title */
  42.                     div.title_table {height:59px; width:100%; border-top:1px solid #999; border-left:1px solid #999; }
  43.                     div.title_row {height:40px; font-size:14px; line-height:39px; }
  44.                     div.title_model {width:160px;}
  45.                     div.title_variantFilter {width:160px;}
  46.                     div.title_description {width:882px; }
  47.                     div.title_zone {width:100px; }
  48.                     div.title_op {width:100px; }
  49.                     div.title_issue {width:40px; }
  50.                     div.title_page {width:40px; }
  51.     </style>
  52.     <style media="print" type="text/css">                    
  53.                     div.sheet {margin:0px; page-break-after:always; }            
  54.     </style>
  55. </head>
  56. <body>
  57. <div class="sheet">
  58. <div class="sheet_hdr">
  59. <div class="logo_table">
  60. <div class="row">
  61. <div class="cell logo_img">
  62. <img src="images\logo.gif" alt="images\logo.gif"/></div>
  63. <div class="cell logo_title">PROCESS BROCHURE</div>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="sheet_bdy">
  68. <div class="row">
  69. <div class="hdr cell sheet_title">Layout</div>
  70. </div>
  71. <div class="layout_img">
  72. <img alt="images/layout.BMP" src="images/layout.BMP"/></div>
  73. </div>
  74. <div class="sheet_ftr">
  75. <div class="history_table">
  76. <div class="row">
  77. <div class="hdr cell history_date">Date</div>
  78. <div class="hdr cell history_issue">Issue</div>
  79. <div class="hdr cell history_version">Version</div>
  80. <div class="hdr cell history_description">Description</div>
  81. <div class="hdr cell history_planner">Planner</div>
  82. <div class="hdr cell history_manager">Manager</div>
  83. </div>
  84. <div class="row">
  85. <div class="cell history_date">Date</div>
  86. <div class="cell history_issue">Issue</div>
  87. <div class="cell history_version">Version</div>
  88. <div class="cell history_description">Description</div>
  89. <div class="cell history_planner">Planner</div>
  90. <div class="cell history_manager">Manager</div>
  91. </div>
  92. <div class="row">
  93. <div class="cell history_date">Date</div>
  94. <div class="cell history_issue">Issue</div>
  95. <div class="cell history_version">Version</div>
  96. <div class="cell history_description">Description</div>
  97. <div class="cell history_planner">Planner</div>
  98. <div class="cell history_manager">Manager</div>
  99. </div>
  100. <div class="row">
  101. <div class="cell history_date">Date</div>
  102. <div class="cell history_issue">Issue</div>
  103. <div class="cell history_version">Version</div>
  104. <div class="cell history_description">Description</div>
  105. <div class="cell history_planner">Planner</div>
  106. <div class="cell history_manager">Manager</div>
  107. </div>
  108. <div class="row">
  109. <div class="cell history_date">Date</div>
  110. <div class="cell history_issue">Issue</div>
  111. <div class="cell history_version">Version</div>
  112. <div class="cell history_description">Description</div>
  113. <div class="cell history_planner">Planner</div>
  114. <div class="cell history_manager">Manager</div>
  115. </div>
  116. <div class="row">
  117. <div class="cell history_date">Date</div>
  118. <div class="cell history_issue">Issue</div>
  119. <div class="cell history_version">Version</div>
  120. <div class="cell history_description">Description</div>
  121. <div class="cell history_planner">Planner</div>
  122. <div class="cell history_manager">Manager</div>
  123. </div>
  124. </div>
  125. <div class="title_table">
  126. <div class="row">
  127. <div class="hdr cell title_model">Model</div>
  128. <div class="hdr cell title_variantFilter">Variant</div>
  129. <div class="hdr cell title_description">Description</div>
  130. <div class="hdr cell title_zone">Zone</div>
  131. <div class="hdr cell title_op">Op</div>
  132. <div class="hdr cell title_issue">Issue</div>
  133. <div class="hdr cell title_page">Page</div>
  134. </div>
  135. <div class="title_row">
  136. <div class="cell title_model">
  137. <p>PROJECT</p>
  138. </div>
  139. <div class="cell title_variantFilter">
  140. <p></p>
  141. </div>
  142. <div class="cell title_description">
  143. <p>ASSEMBLY</p>
  144. </div>
  145. <div class="cell title_zone">
  146. <p>02</p>
  147. </div>
  148. <div class="cell title_op">
  149. <p>00005</p>
  150. </div>
  151. <div class="cell title_issue">
  152. <p></p>
  153. </div>
  154. <div class="cell title_page">
  155. <p>4</p>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </body>
  162. </html>
  163.  
Apr 1 '08 #1
Share this Question
Share on Google+
2 Replies


ronverdonk
Expert 2.5K+
P: 4,258
What about[php]vertical-align:middle;[/php] in your CSS def?

Ronald
Apr 24 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
The xml declaration on the first line is correct but only modern browsers handle it properly while IE chokes on it and goes into quirks mode. Remove this line:
<?xml version="1.0" encoding="iso-8859-1"?>

The float is possibly causing more problems but I don't have time this morning.
Apr 25 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.