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
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
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style type="text/css">
body {margin:0px; padding:0px; font-size:12px; line-height:16px; font-family:arial; background-color:white; }
img {border:0px; display:block; }
/* Sheet */
div.sheet {height:840px; width:1485px; border:1px solid #999; margin:15px; }
div.sheet_hdr {height:51px; width:100%; }
div.sheet_bdy {height:624px; width:100%; border-top:1px solid #999; border-left:1px solid #999; }
div.sheet_ftr {height:163px; width:100%; }
div.row {clear:both; }
div.cell {float:left; text-align:center; border-right:1px solid #999; border-bottom:1px solid #999; height:100%; overflow:hidden; }
div.hdr {font-weight:bold; text-transform:uppercase; border-bottom:2px solid #999; background-color:#eee; }
/* Logo */
div.logo_table {height:50px; width:100%; border-top:1px solid #999; border-left:1px solid #999; }
div.logo_img {width:201px; height:50px; }
div.logo_img img {width:200px; height:49px; }
div.logo_title {width:1281px; height:50px; font-weight:bold; font-size:18px; line-height:49px;}
div.sheet_title {width:100%; line-height:25px; clear:both; border-bottom:1px solid #999; }
/* Layout */
div.layout_img {width:1482px; height:599px; border:1px solid #999; }
div.layout_img img {text-align:center;}
/* History */
div.history_table {height:104px; width:100%; border-top:1px solid #999; border-left:1px solid #999; }
div.history_date {width:120px; }
div.history_issue {width:40px; }
div.history_version {width:160px; }
div.history_description {width:962px; }
div.history_planner {width:100px; }
div.history_manager {width:100px; }
/* Title */
div.title_table {height:59px; width:100%; border-top:1px solid #999; border-left:1px solid #999; }
div.title_row {height:40px; font-size:14px; line-height:39px; }
div.title_model {width:160px;}
div.title_variantFilter {width:160px;}
div.title_description {width:882px; }
div.title_zone {width:100px; }
div.title_op {width:100px; }
div.title_issue {width:40px; }
div.title_page {width:40px; }
</style>
<style media="print" type="text/css">
div.sheet {margin:0px; page-break-after:always; }
</style>
</head>
<body>
<div class="sheet">
<div class="sheet_hdr">
<div class="logo_table">
<div class="row">
<div class="cell logo_img">
<img src="images\logo.gif" alt="images\logo.gif"/></div>
<div class="cell logo_title">PROCESS BROCHURE</div>
</div>
</div>
</div>
<div class="sheet_bdy">
<div class="row">
<div class="hdr cell sheet_title">Layout</div>
</div>
<div class="layout_img">
<img alt="images/layout.BMP" src="images/layout.BMP"/></div>
</div>
<div class="sheet_ftr">
<div class="history_table">
<div class="row">
<div class="hdr cell history_date">Date</div>
<div class="hdr cell history_issue">Issue</div>
<div class="hdr cell history_version">Version</div>
<div class="hdr cell history_description">Description</div>
<div class="hdr cell history_planner">Planner</div>
<div class="hdr cell history_manager">Manager</div>
</div>
<div class="row">
<div class="cell history_date">Date</div>
<div class="cell history_issue">Issue</div>
<div class="cell history_version">Version</div>
<div class="cell history_description">Description</div>
<div class="cell history_planner">Planner</div>
<div class="cell history_manager">Manager</div>
</div>
<div class="row">
<div class="cell history_date">Date</div>
<div class="cell history_issue">Issue</div>
<div class="cell history_version">Version</div>
<div class="cell history_description">Description</div>
<div class="cell history_planner">Planner</div>
<div class="cell history_manager">Manager</div>
</div>
<div class="row">
<div class="cell history_date">Date</div>
<div class="cell history_issue">Issue</div>
<div class="cell history_version">Version</div>
<div class="cell history_description">Description</div>
<div class="cell history_planner">Planner</div>
<div class="cell history_manager">Manager</div>
</div>
<div class="row">
<div class="cell history_date">Date</div>
<div class="cell history_issue">Issue</div>
<div class="cell history_version">Version</div>
<div class="cell history_description">Description</div>
<div class="cell history_planner">Planner</div>
<div class="cell history_manager">Manager</div>
</div>
<div class="row">
<div class="cell history_date">Date</div>
<div class="cell history_issue">Issue</div>
<div class="cell history_version">Version</div>
<div class="cell history_description">Description</div>
<div class="cell history_planner">Planner</div>
<div class="cell history_manager">Manager</div>
</div>
</div>
<div class="title_table">
<div class="row">
<div class="hdr cell title_model">Model</div>
<div class="hdr cell title_variantFilter">Variant</div>
<div class="hdr cell title_description">Description</div>
<div class="hdr cell title_zone">Zone</div>
<div class="hdr cell title_op">Op</div>
<div class="hdr cell title_issue">Issue</div>
<div class="hdr cell title_page">Page</div>
</div>
<div class="title_row">
<div class="cell title_model">
<p>PROJECT</p>
</div>
<div class="cell title_variantFilter">
<p></p>
</div>
<div class="cell title_description">
<p>ASSEMBLY</p>
</div>
<div class="cell title_zone">
<p>02</p>
</div>
<div class="cell title_op">
<p>00005</p>
</div>
<div class="cell title_issue">
<p></p>
</div>
<div class="cell title_page">
<p>4</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Comment