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

**programAngel** · 10-20-2011 11:18 AM

thanks

Thread: setting picture in the middle

Thread Tools

Display

setting picture in the middle

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions