Results 1 to 3 of 3

Thread: Centering varying size images in fixed size DIVs

  1. #1
    Join Date
    Jun 2009
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Centering varying size images in fixed size DIVs

    I'm up against the centering deficiencies of current CSS. Building a Category page to display a series of products on a dynamically generated eCommerce site. I know that the upper limits of the thumbnail height and width are 140px, so every thumb will be 140 pixels in one dimension. But each product naturally has its own aspect ratio. So a picture of an upright vacuum will likely be 140 pixels high while a Rhomba would be 140 pixels wide but just a few pixels high.

    Must I go through writing software to measure image height and write a local style setting the top and bottom margin; or is there some CSS trick that would make Margin: auto; actually work to center vertically and horizontally?

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default some links I found

    See for instance http://www.w3.org/Style/Examples/007/center.en.html

    Horizontal centering can be achieved by margin-right: auto and margin-left: auto (margin: 0 auto;.) in most browsers.. Images are inline elements that can be centered with text-align: center. Can set one dimension (width or height) and the other dimension to auto (I think second dimension will adjust to keep aspect ratio without specifying "auto.") Vertical centering is not as easy:

    CSS level*2 doesn't have a property for centering things vertically. There will probably be one in CSS level*3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
    For CSS3 see for instance http://net.tutsplus.com/tutorials/ht...soon-be-using/

    #content {
    display: table;
    }
    #mainContent {
    display: table-cell;
    width: 620px;
    padding-right: 22px;
    }
    aside {
    display: table-cell;
    width: 300px;
    }
    Several approaches presented at http://blog.themeforest.net/tutorial...ring-with-css/ .
    For CSS3 Flexible Box see
    http://www.456bereastreet.com/archiv...ayout_flexbox/
    http://www.css3.info/introducing-the...layout-module/
    http://www.wiibart.com/vertical-centering-with-css3
    and CSS3 box-align property
    http://www.w3schools.com/cssref/css3_pr_box-align.asp
    and vertical align http://www.css3.com/css-vertical-align/

    You could also cheat with a real <TABLE><TR><TD>align</TD><TR></TABLE>.
    Last edited by auntnini; 12-12-2011 at 11:54 PM. Reason: clean up

  3. The Following User Says Thank You to auntnini For This Useful Post:

    ETpro (12-14-2011)

  4. #3
    Join Date
    Jun 2009
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thanks, auntnini. I hadn't thought of making the contianing block display: table;. Great idea. If I remember, most real browsers respect that, but lots of versions of pretend browsers like IE don't. But still, it's better than descending back into table hell just to center a bunch of images in a row.

    Happy holidays to you.

    Jim

Bookmarks

Posting Permissions

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