Skip navigation
alexr62
alexr62 Calculating status...
Currently Being Moderated

Vertically centering an image within a floated element

May 28, 2012 5:53 PM

I'm trying to vertically center an image within a left-floated div. The image is horizantally centered using the div's text-align property. I've gone to several help websites that say to set the vertical-align property of the image to "middle," but that doesn't seem to work. Is the div's float property affecting anything?

 

I don't think I can use absolute positioning or any other method that uses an exact margin based on the height of the image. I'm trying to create an image gallery that replaces the image when a thumbnail is clicked, and since there are portrait and landscape images in the gallery, the solution has to work for multiple image sizes.

 

Here's the HTML for the element:

 

<div id="imagewrap">
    <img src="/GlennThomas/images/graphics/black.gif" />
  </div>

 

Here's the CSS:

 

 

#imagewrap {
    width: 720px;
    height: 695px;
    float: left;
    clear: right;
    margin-left: 10px;
    position: relative;
    text-align: center;
}
#imagewrap img {
    width: 710px;
    vertical-align: middle;
}

 

Thanks,

Alex

912 Views   10 Replies   Latest reply: osgood_, May 31, 2012 1:27 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    May 28, 2012 6:08 PM   in reply to alexr62
    Report

    Try this:

     

    #imagewrap {
        width: 720px;
        float: left;
        margin-left: 10px;

              border: 1px dotted red; /**for demo purposes only, you may omit this**/

    }


    #imagewrap img {
        width: 710px;
        margin-top: 20%; /*adjust margins to suit*/

              margin-left: auto;

              margin-right:auto;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • alexr62
    Currently Being Moderated
    2. alexr62,
    May 28, 2012 7:00 PM   in reply to Nancy O.
    Report

    Thanks for answering, Nancy.

     

    The margin-top attribute centers the landscape pictures correctly, but the portrait pictures extend below the bottom of the div.

     

    The problem is that the some of the image files are 480px in height. and the other files are closer to 700px in height. I'd need two different margin percentages for portrait and landscape pictures. Do you think I need to use javascript to do this? (That wouldn't be good because my script for replacing the images is entirely based on a tutorial that uses same-size images).

     

    Also, when the margin-top value is a percentage, is it referring to the percentage of the element's height?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    May 29, 2012 8:54 AM   in reply to alexr62
    Report

    Image margins are calculated from containing div -- imagewrap.

     

    Portrait and landscape photos are challenging because aspect ratios are so different.

    Do you think I need to use javascript to do this?

     

    No.  To further refine image styles, use 2 classes: .one for portrait; one for .landscape.

     

     

    Nancy O.

     
    |
    Mark as:
  • alexr62
    Currently Being Moderated
    4. alexr62,
    May 29, 2012 12:11 PM   in reply to Nancy O.
    Report

    The reason I can't use two classes is that the script I'm using replaces the image by modifying the "src" attribute of the image tag without modifying its class or other attributes. I need a centering method that universally works for images with multiple heights.

     

    I tried another method that doesn't seem to work. It involves placing a div within the floated div that is set to display as a table cell. The table cell div's vertical align attribute is set to middle. All of the help sources I have seem to say that "inline centering methods" don't work because the float property on the container div.

     

    My current idea is to expand the landscape images vertically with transparent canvas extensions (photoshop). That should make all of the images the same size. Before I do this, do you know of any other solutions for vertically centering that don't involve manually setting a margin?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    May 29, 2012 2:19 PM   in reply to alexr62
    Report

    Without a link, I'm not sure I understand what you're trying to do or why vertical centering is so important.

     

    Vertical centering is mainly a print concept that doesn't translate well to the web.  On the web, everyone uses different sized devices & viewports. Absolute vertical is impossible to calculate without hard and fast numbers.  If it's impossible to calculate, why spend time worrying about it?

     

    As food for thought, my CSS Image Viewer Demo below has a self-adjusting container.  No vertical centering required on images.

    http://alt-web.com/DEMOS/CSS-Image-Viewer.shtml

     

     

    Nancy O.

     
    |
    Mark as:
  • MurraySummers
    Currently Being Moderated
    6. MurraySummers,
    May 29, 2012 2:24 PM   in reply to Nancy O.
    Report

    The best way to vertically center is to indeed use the display:table-cell approach, since content in a table cell is always vertically centered by default.  To use that approach you have to be willing to take the compromises that go along with it.  And I believe that one would not refer to this approach as an inline centering method, so I'm not sure how applicable your help sources are (@alexr62).

     
    |
    Mark as:
  • alexr62
    Currently Being Moderated
    7. alexr62,
    May 29, 2012 8:15 PM   in reply to MurraySummers
    Report

    I don't have any hosting for my website yet, so the only way I can think of to show you what I'm trying to do is with an image.

     

    centeredimage.jpg

     

    In the main content area, the image (man wearing sunglasses) is centered vertically within a div floated left next to a list of thumbnails. The image is curently centered because I've extended the image file's canvas vertically. I'm concerned because if I have to change the height of the div, I'll have to manually change all of the image aspect ratios.

     

    "Inline centering" is a term I came up with because I wasn't sure what to call it. I meant centering where the image isn't being treated as a block.

     

     

     

    To use that approach you have to be willing to take the compromises that go along with it.

     

    Can you explain why the table-cell method isn't working? Are you implying that using it with a floated element is one of the compromises?

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    8. osgood_,
    May 30, 2012 12:32 AM   in reply to alexr62
    Report

    alexr62 wrote:

     

    Can you explain why the table-cell method isn't working? Are you implying that using it with a floated element is one of the compromises?

     

    You can't use float directly on the <div> where you require an element vertically centered in conjuction with display: table-cell; What you can do is float a wrapper container (see below).

     

    This technique works in IE8 and above.

     

     

     

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

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <style type="text/css">

    #imageWrapContainer {

        float: left;

        width: 720px;

        margin-left: 10px;

    }

    #imagewrap {

    display: table-cell;

    width: 720px;

    height: 695px;

    vertical-align: middle;

    border: 1px solid #930;

    text-align: center;

    }

     

    </style>

    </head>

     

    <body>

    <div id="imageWrapContainer">

    <div id="imagewrap">

    <img src="photo.jpg" width="400" height="300" alt="" />

    </div><!-- end imageWrapper -->

    </div><!-- end imageWrapper Container -->

    </body>

    </html>

     
    |
    Mark as:
  • alexr62
    Currently Being Moderated
    9. alexr62,
    May 30, 2012 2:07 PM   in reply to osgood_
    Report

    You can't use float directly on the <div> where you require an element vertically centered in conjuction with display: table-cell; What you can do is float a wrapper container (see below).

     

    I tried this and it didn't work either.

     

    Here's the HTML for the wrapper, the wrapper container, the "main content" div that contains both, and all relevant CSS.

     

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

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <link href="CSS/glennthomas.css" rel="stylesheet" type="text/css" />

    <script src="/GlennThomas/jquery.tools.min(1).js"></script>

    <style type="text/css">

    #container {

        width: 980px;

        height: 950px;

        padding-left: 20px;

        padding-right: 20px;

        padding-top: 20px;

        overflow: hidden;

        background-image: url(../images/bckg.jpg);

        background-repeat: no-repeat;

        margin: 0 auto;

    #maincontent {

        margin-top: 10px;

        overflow: hidden;

        background-image: url(../images/graphics/transparentblack.png);

        padding: 20px 20px 10px;

        height: 720px;

    }

    #imagewrap {

        width: 720px;

        float: left;

        clear: right;

        margin-left: 10px;

        height: 695px;

    }

    #imagewrap div {

        width: 720px;

        height: 695px;

        display: table-cell;

        vertical-align: center;

        text-align: center;

    }

    #imagewrap img {

        width: 710px;

    }

    </style>

    </head>

     

    <body>

    <div id="container">

    <div id="maincontent">

    <div id="imagewrap">

    <div>

    <img src="/GlennThomas/images/gallery/_MG_9780.jpg" />

    </div>

    </div>

    </div>

    </div>

    </body>

    </html>

     

     

    Thanks for your help.

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    10. osgood_,
    May 31, 2012 1:27 AM   in reply to alexr62
    Report

    Youre missing a closing } bracket after the '#container' css which is stopping the css cascade.

     

    PLUS vertical-align: center; below should be vertical-align: middle;

     

     

    #imagewrap div {

        width: 720px;

        height: 695px;

        display: table-cell;

        vertical-align: center;

        text-align: center;

    }

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points