setting picture in the middle

**programAngel** · 10-16-2011, 11:59 AM

Hi I have tired to set a picture in the middle of a page that contain only that picture.
using vertical-align doesn't work for me

This is the code:

Code:

<!DOCTYPE html>
<html>
<title>gula</title>
<head>
</head>
<body bgcolor="gray">
<div align="center" style="position:relative; top:10%;">
<img src="gula.jpg" height=768 width=1024/>
</div>
</body>
</html>

It working for in IE but not in chrome or firefox.
I mean in IE I do see the picture in the middle but not in any of the other.

So I hope to hear some advice on how to solve this problem.

**nailyener** · 10-17-2011, 02:13 AM

It looks aligned to me. Do you have a screenshot of the problem?

**danielfurze** · 10-17-2011, 04:49 AM

Try putting {margin:0 auto;} in the style for the div containing the image?

**danielfurze** · 10-17-2011, 04:50 AM

Oh and you may need to specify the width of it for that to work.

**Major Payne** · 10-17-2011, 05:34 AM

Dead Center Alignment See here.

**programAngel** · 10-20-2011, 04:54 AM

First of all thanks to all of you that try to help me and answer me.

sorry maybe I have not made myself clear.

The horizontal centering is fine, however I do have problem with the vertical centering.

Does any one know a good way to implement vertical centering.

I tried to google it but the answer didn't worked for me.

What should a fix in my code to make the picture centered vertically?
Given the the picture is the only object in this page.

**Major Payne** · 10-20-2011, 05:22 AM

Originally Posted by programAngel

The horizontal centering is fine, however I do have problem with the vertical centering.

Does any one know a good way to implement vertical centering.

Guess you didn't take the time to analyze the dead centering coding and attempt to use it. It can't be easier than just following the method and adapting it to your image.

**programAngel** · 10-20-2011, 05:53 AM

Originally Posted by Major Payne

Guess you didn't take the time to analyze the dead centering coding and attempt to use it. It can't be easier than just following the method and adapting it to your image.

OK I am learning it right.

But can you tell me why in chrome and firefox the image stick to the top and not 20% lower?

**coothead** · 10-20-2011, 07:53 AM

Hi there Ron,

there is one slight drawback to your centering method.

When reducing the height of the page, there will come a point where the top of the #container div disappears.

The following method avoids this problem...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://nopeople.com/CSS%20tips/vertical%20center%20with%20CSS/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>centered vertically and horizontally</title>

<style type="text/css">
html,body {
    height:100%;
    min-height:210px;   /* same as the #container height */
    margin:0;
    background:#fc6;
    font:normal 11px 'comic sans ms',sans-serif;
    color:#333;
 }
#vertical {
    float:left;
    width:100%;
    height:50%;
    margin-top:-105px; /* half the #container height */
 }
#container {
    clear:both;
    width:300px;
    height:210px;
    margin:auto;
    background:#ccc;
 }
#container p {
    margin:0;
    text-align:center;
    line-height:25px;
 }
#container img {
    width:195px;
    height:175px;
 }
</style>

</head>
<body>

<div id="vertical"></div>

<div id="container">
<p>This is vertically &amp; horizontally centered.  
<img src="boat.jpg" alt="fishing boat">
</p>
</div>

</body>
</html>

coothead