www.webdeveloper.com
Results 1 to 9 of 9

Thread: centering vertically

  1. #1
    Join Date
    Apr 2012
    Posts
    99

    Post centering vertically

    I am having trouble vertically centering an image inside of a div. can anyone please provide an example?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,108
    I found a method of vertical centering on a site called dead Centre. You might give it a try.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254

  4. #4
    Join Date
    Aug 2012
    Posts
    155
    If your containing div has a set height and all images are the same height, an easy solution is just to do a quick calculation of the space left and divide it by 2 to get the top margin/padding.

    For example, if your containing div is a height of 140px and your images are all a height of 100px, that would leave a difference of 40px so your top margin would be 20px and then in your css:

    Code:
    .img-container {
      height: 140px;
      padding-top: 20px;
    }
    .img-container img {
      margin: 0;
      padding 0;
    }
    If your images are different heights then you would need a more complex calculation using javascript to then alter your containing div accordingly.

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there droidus,

    here is an example for you to try...
    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://www.coothead.co.uk/images/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    #table {
        display:table;
        height:400px;
        padding:20px;
        margin:20px auto;
        border:1px solid #999;
        border-radius:10px;
        background-color:#fff;
        box-shadow:10px 10px 10px #666;
     }
    #cell {
        display:table-cell;
        vertical-align:middle;
     }
    #cell img {
        vertical-align:middle;
        border:1px solid #000;
        margin:0 10px;
        box-shadow:4px 4px 4px #999;
     }
    </style>
    
    </head>
    <body>
    
    <div id="table">
     <div id="cell">
      <img src="blood_thumb.jpg" alt="">
      <img src="girl.jpg" alt="">
      <img src="lace_thumb.jpg" alt="">
      <img src="aaa.jpg" alt="">
     </div>
    </div>
    
    </body>
    </html>
    
    coothead

  6. #6
    Join Date
    Aug 2012
    Posts
    155
    Quote Originally Posted by coothead View Post
    Hi there droidus,

    here is an example for you to try...
    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://www.coothead.co.uk/images/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body {
        background-color:#f0f0f0;
     }
    #table {
        display:table;
        height:400px;
        padding:20px;
        margin:20px auto;
        border:1px solid #999;
        border-radius:10px;
        background-color:#fff;
        box-shadow:10px 10px 10px #666;
     }
    #cell {
        display:table-cell;
        vertical-align:middle;
     }
    #cell img {
        vertical-align:middle;
        border:1px solid #000;
        margin:0 10px;
        box-shadow:4px 4px 4px #999;
     }
    </style>
    
    </head>
    <body>
    
    <div id="table">
     <div id="cell">
      <img src="blood_thumb.jpg" alt="">
      <img src="girl.jpg" alt="">
      <img src="lace_thumb.jpg" alt="">
      <img src="aaa.jpg" alt="">
     </div>
    </div>
    
    </body>
    </html>
    
    coothead
    Why suggest moving to tables for layout in this day and age???

  7. #7
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there simplypixie,
    Why suggest moving to tables for layout in this day and age???
    Who has suggested this.

    There are no tables in the code that I provided, other than the one preceded by a "#".

    Perhaps a visit to the opticians may help your situation.

    coothead

  8. #8
    Join Date
    Aug 2012
    Posts
    155
    My apologies, it is because you have called the divs 'table' - I just read it that you were formatting tables.

    You are correct - I should be wearing my glasses

  9. #9
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there simplypixie,

    no problem, apology accepted.

    I wouldn't normally use "#table" as an "id", but just thought
    that it might be an aid to the O.P.'s original question.

    coothead

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