Center Image Vertically

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

 
<?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>

Apr 1 '08 #1

Subscribe Post Reply

2746

ronverdonk

4,258

Expert 4TB

What about[php]vertical-align:middle;[/php] in your CSS def?

Ronald

Apr 24 '08 #2

drhowarddrfine

7,435

Expert 4TB

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

by: Tony Vasquez | last post by:

Can somoene give me an example of how to center a div, according to it's image size... I am using different images, and so I have to resize it in a functino according to the image's size. So I use...

Javascript

How to center vertically ?

by: FL | last post by:

Hi Everyone, I know howto center a block using margin-left: auto ; margin-right: auto ; but I'm trying to center vertically a box, any idea to solve this?

HTML / CSS

How do you vertically center an html table in css.

by: john T | last post by:

Is there anyway to vertically center a html table using css in such a way it does not alter the html table. When I tryied it just screws up.

HTML / CSS

center image in div

by: steven | last post by:

Hi, I'm trying to center an image in a div, both horizontally and vertically. (Each div holds a thumbnail image.) Here's the HTML: <div class="thumb"> <div> <img src="tn_02-2022.jpg" />...

HTML / CSS

Center a page vertically

by: Unknown User | last post by:

Yet another question about vertical centering: How can I center a page vertically? I have searched on Google and didn't find anything that works at least on IE, Opera and Mozilla:...

HTML / CSS

Center these images? And more...

by: mercurius_1 | last post by:

I need some help with this page: http://www.sarahpollock.com/new/x.php I stole much of this layout from "A List Apart," but I'm no CSS guru and I desperately need some help with the finishing...

HTML / CSS

vertical-align: center

by: Eric Lindsay | last post by:

If I want to have the middle of an image vertically aligned with the middle of a heading (or several lines of heading), is there some particular way people would recommend? vertical-align: center...

HTML / CSS

Lost ability to center tables vertically

by: Serg | last post by:

I had some CSS problems, and they were solved by someone who pointed out to me that I should have <!DOCTYPE ..... at the top of my code, which I now do. And it fixed all the inheritance...

HTML / CSS

Vertical center on images and text at the same line

by: Egil Helland | last post by:

I am trying to create a breadcrumb with both icons and text, looking like: Home > Trail > Trail Now, how on earth do I get the images and text to vertically align so that the vertical...

HTML / CSS

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Center Image Vertically

Similar topics