www.webdeveloper.com
Results 1 to 11 of 11

Thread: Image position

  1. #1
    Join Date
    Nov 2002
    Location
    Peterborough, UK
    Posts
    166

    Image position

    I've seen this answered on here many months ago, but I can't find it with the search tool.

    I have a picture on a homepage (Click), which I would like centered between left-right and top-bottom. I can do the left-right centering with HTML <CENTER>, but I can't work out how to get it top-bottom centered with CSS.

    Can someone nudge me in the direction of an answer ?

    Thanks in advance

    Rich

  2. #2
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    I do not believe there is any CSS provision to center vertically but you could try this...

    <HTML><HEAD><TITLE>homepage</TITLE>
    <LINK REL="stylesheet" HREF="acetylene.css" TYPE="text/css">
    <style type="text/css">
    #pict { text-align:center; padding-top:20%; height:100% }
    </style>
    </HEAD>
    <BODY>
    <div id="pict"><IMG ID="homeimage" SRC="band.jpg"></div>
    </BODY>
    </HTML>

  3. #3
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Or try this

    #pict { text-align:center; width: 100%; height:100%; vertical-align: center; }

    <div id="pict">your image here</div>

    Havik

  4. #4
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Not supposed to work. Image should NOT be center aligned using text-align: center. Instead the following should work:
    Code:
    img {left: auto; right: auto;
        text-align: center; /* This is for IE */}
    Or
    Code:
    img {position: absolute; left: 50%;
        margin-left: -100px; /* Replace with (width/2) */}
    Here is the example I tried (IE5/Win, NS7, Opera7)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <style type="text/css">
        div.d1{position:absolute; left:100; top:150;
            width: 200; height: 200;
            border: 1px black solid}
        div.d2{position:absolute; left: 50%; top: 50%;
            width: 100px; height: 100px;
            border: 1px green dotted;
            margin-left: -50px; margin-top: -50px;}
        </style>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    </head>
    
    <body>
    <div class="d1">Outer div
        <div class="d2">Centered Div</div>
    </div>
    
    </body>
    </html>

  5. #5
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    havik......
    #pict { text-align:center; width: 100%; height:100%; vertical-align: center; }
    As stated above, CSS does not have a vertical-align for use in this application. It works within an image tag to align the text relative to the image and uses 'vertical-align:middle'

    nkaisare......
    img {left: auto; right: auto; text-align: center;} /* This is for IE */}
    If you remove the text-align:center it will not work in IE6. As far as I know (confirmed by testing) text-align:center will center anything (almost) that is contained within the <div>.

    The example you provided uses position:absolute and will not accommodate differing resolutions or window sizes. The top:50%, left:50% does not center the enclosed div but centers the top, left corner.

  6. #6
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Originally posted by nedals
    If you remove the text-align:center it will not work in IE6.
    Of course. Thats why I added text-align: center. Thats for IE. left: auto; right: auto are for standards compliant browsers.

    The example you provided uses position:absolute and will not accommodate differing resolutions or window sizes. The top:50%, left:50% does not center the enclosed div but centers the top, left corner.
    Very true. But you did not read the next part. If an image is 100px wide, use
    margin-left: -50px;
    left: 50% will offset the div by 50%
    margin-left: -50px will push the image half way to the left, giving it horizontally centered look.

    The code that I pasted is valid and works to the T. Copy-paste it, and see for yourself how it works.

  7. #7
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    I'm relatively new to CSS positioning, but not to website design in general, and am certainly not here to be antagonistic.
    Here's a quote from O'Reilly's 'Cascading Style Sheets'
    The only way to center an image using text-align is to wrap a DIV around the image, and set the DIV's contents to be centered.

    I tried the following in IE5, NS7, and Opera6. (not all at once of course) and here are my observations.

    <html><head><title>Untitled</title>
    <style type="text/css">
    /* Doesn't work on any platform */
    img {left:auto; right:auto; text-align:center;}

    /* works as expected on all platforms but will need absolute vertical positioning and knowledge of the image size to position correctly.*/
    img { position:absolute; left:50%; }

    /* works as expected but suffers from the same problems as above */
    div.d1 { position:absolute; left:100; top:150; width:200; height:200; border:1px black solid}
    div.d2 { position:absolute; left:50%; top:50%; width:100px; height:100px; border:1px green dotted; margin-left:-50px; margin-top:-50px;}

    /* Correctly centers the images but still requires vertical positioning */
    #pict { text-align:center; padding-top:20%; height:100% }
    </style>
    </head>

    <body bgcolor="#ffffff">
    <img src="images/bkpix.gif" width=100 height=100>

    <div class="d1">Outer div
    <div class="d2">Centered Div</div>
    </div>

    <div id="pict"><img src="images/bkpix.gif" width=100 height=100></div>
    </body>
    </html>

    I guess I'm trying to understand your objection to the code I posted above?

  8. #8
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    Hi,

    I don't know how reliable this is but it seems to wotk in IE6, Mozilla 1.2, Opera 6.03 and Netscape 6.2.

    This will centre an image vertically and horizontally:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Centre image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
    	height: 100%;	
    }
    img {
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	margin-top: -30px; /* make this half your image height */
    	margin-left: -30px; /* make this half your image width */
    }
    </style>
    </head>
    <body>
    <div ><img src="img.gif" width="60" height="60" /></div>
    </body>
    </html>
    The idea is to set the body to 100% to give the image a container to find the centre of. The image is absolutely positioned 50% from the top and 50% from the left. The left and top margins of the image is then set to minus half the image width and height which should drag it back to centre (theoretically).

    I don't know if this works in IE5 but it works in IE6 in quirks mode so it might work??

    Hope this is of some use.

    Paul

    Edit: Whoops ...perhaps I should read all the posts before I jump in!! The routine above is basically the same as already been stated above, but the key to it working on different window sizes is setting the body to 100%. This means the image will stay central when the window is resized. (If you don't set body to 100% IE will not keep the image central as the window is resized.)
    Last edited by Paul O'B; 04-17-2003 at 05:31 PM.

  9. #9
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Originally posted by nedals
    Edit: My mistake. I misinterpreted the specs.

    img { position:absolute; left:50%; }
    1. This will position left edge of the image at the center
    2. Remember absolute positioning is positioning with respect to the parent positioned element, or the viewport (browser window) if none exist.

    I guess I'm trying to understand your objection to the code I posted above?
    I don't. I simply added left: auto and right: auto for compliant browsers.
    Edit: Not required. Nedals' was correct there.

    And also provided alternate CSS method.
    Edit: Yes this method works too.

    BTW, when you tried, did you use a complete doctype. If not, the browser may go into buggy mode and results will be different. I tried it with strict dtd.
    Edit: Again, this was nested divs. I was applying text-align to inner div. My mistake again.

    Edit: I left my original (incorrect) msg as is so that people reading this thread later can understand what this discussion was all about.
    Last edited by nkaisare; 04-17-2003 at 10:56 PM.

  10. #10
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    OK... Here's where I am.
    Using that code I posted....

    I was using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    img {left:auto; right:auto; text-align:center;} // doesn't work on IE5, NS7, or Op6. Everthing else working as expected.

    using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    img {left:auto; right:auto; text-align:center;} // doesn't work on any platform.
    Everything else working as expected on IE5 and Op6 but NS7 messed up the 'd1' and 'd2' DIV's

    All these wonderful standards.
    Sometimes I think of the W3 consortium as the committee that designed the horse and came up with the camel.
    Much as I hate Microsoft, they do have the predominant browser and I can't imagine why the W3 didn't design a standard that was
    at least fully compliant with something!

    Oh well! Press on regardless

  11. #11
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Originally posted by nedals
    All these wonderful standards.
    Sometimes I think of the W3 consortium as the committee that designed the horse and came up with the camel.
    Much as I hate Microsoft, they do have the predominant browser and I can't imagine why the W3 didn't design a standard that was at least fully compliant with something!
    http://www.w3.org/TR/REC-CSS2/
    CSS-2 Recommendation: 12-May-1998
    IE 5.0/Win released August 18 1999
    So you see, the specs predate the browser.

    I also feel that one should not harbour too much on specs. Specs are also made by people. But the good thing about them are:
    1. They are made by a consortium that is composed of developers from most major browser vendors
    2. Even if specs are not 100% correct (may be satisfactory is more appropriate word), if we have browsers adhering to them, we will have consistency. What works in one WILL work to a fair degree in another.
    3. Backword compatibility is easier to maintain if there is standards compliance. We have printed books which are not going to change over time. But if one technology becomes obsolete/redundant, we run into great danger of losing historical stuff (sic).

    But specs are not always the best... hence the need to keep improving and innovating. Pertaining to this thread, for example, IE box model makes more sense to me than the specs. Here is an interesting read on this topic:
    http://netdiver.net/interviews/peterpaulkoch.php

    More appropriate anecdote would be: W3C designed bones and the flesh for making a horse. IE made a camel, NS made a zebra, Opera made a mule.

Thread Information

Users Browsing this Thread

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

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