www.webdeveloper.com
Results 1 to 10 of 10

Thread: setting picture in the middle

  1. #1
    Join Date
    Feb 2011
    Posts
    90

    setting picture in the middle

    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.

  2. #2
    Join Date
    Apr 2011
    Posts
    14
    It looks aligned to me. Do you have a screenshot of the problem?

  3. #3
    Join Date
    Oct 2011
    Posts
    3
    Try putting {margin:0 auto;} in the style for the div containing the image?

  4. #4
    Join Date
    Oct 2011
    Posts
    3
    Oh and you may need to specify the width of it for that to work.

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Last edited by Major Payne; 10-17-2011 at 05:39 AM.

  6. #6
    Join Date
    Feb 2011
    Posts
    90
    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.

  7. #7
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Quote Originally Posted by programAngel View Post
    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.

  8. #8
    Join Date
    Feb 2011
    Posts
    90
    Quote Originally Posted by Major Payne View Post
    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?

  9. #9
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,456
    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

  10. #10
    Join Date
    Feb 2011
    Posts
    90
    thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles