www.webdeveloper.com
Results 1 to 7 of 7

Thread: vertically center an image in a "gallery"

  1. #1
    Join Date
    Oct 2006
    Location
    Colorado Springs
    Posts
    134

    vertically center an image in a "gallery"

    Another question today. Woo!

    Alright, so I have these images that maybe be different sizes. There's going to be PHP, so no telling what the sizes will be. At max they will be 100x100, but they could be 95x100, 73x68, etc. I've got them centered horizontally, but not vertically. Check it out: www.hookedonwinter.com/newdesign
    here's some relevant code:

    CSS:
    Code:
    .thumbnail{
    	float:left;
    	width:106px;
    	height:106px;
    	margin: 15px 31px;
    	text-align:center;
    }
    
    .thumbnail img{
    	border:3px solid #122D5A;
    /*this is probably where I need an auto margin or something, I just can't figure it out...*/
    }
    HTML Code:
    			<div class="thumbnail">
    			<img src="images/myteamplaceholder.png" alt="MyTeam">
    			</div>
    			
    			<div class="thumbnail">
    			<img src="images/placeholder.png" alt="MyTeam">
    			</div>
    			
    			<div class="thumbnail">
    			<img src="images/myteamplaceholder.png" alt="MyTeam">
    			</div>
    			
    			<div class="thumbnail">
    			<img src="images/myteamplaceholder.png" alt="MyTeam">
    			</div>
    the second image is smaller than the rest (75x75 rather than 100x100), and it is vertically aligned to the top. I want it in the middle. ideas? Thanks,

    PJ

    p.s. Graeme - thanks for your help on the text selecting problem. Worked great!
    Last edited by HookedOnWinter; 02-08-2007 at 04:21 PM. Reason: realized i messed something up. might have a fix...

  2. #2
    Join Date
    Jan 2007
    Location
    .qc.ca
    Posts
    43
    Hi HookedOnWinter,

    Add the text in bold to the .thumbnail class

    Code:
    .thumbnail{
    	float:left;
    	width:106px;
    	height:106px;
    	margin: 15px 31px;
    	text-align:center;
    	vertical-align:middle;
    }

  3. #3
    Join Date
    Oct 2006
    Location
    Colorado Springs
    Posts
    134
    isn't that for inline objects? i'm using block objects here...

    and it didn't work.. thanks though

  4. #4
    Join Date
    Oct 2006
    Location
    Colorado Springs
    Posts
    134
    bump, still can't figure it out..

  5. #5
    Join Date
    Oct 2006
    Location
    Colorado Springs
    Posts
    134
    bump. anyone?

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    I ran into this same problem at Motortopia.com. My solution was fairly easy, which I'll adapt to your markup.
    Code:
    .thumbnail {
     float: left;
     height: 100px;
     position; relative;
     width: 100px;
    }
    
    .thumbnail .thumbBox {
     left: 0;
     position: absolute;
     text-align: center;
     top: 50%;
     width: 100px;
    }
    
    .thumbnail .thumbBox img {
     vertical-align: bottom;
    }
    Now the HTML:
    Code:
    <div class="thumbnail">
      <div class="thumbBox" style="height: [image height]px; margin-top: -[Half of this image's height]px;"><img ...></div>
    </div>
    The downside is it does require you to know the dimensions of each image, which you can get with a PHP function -- http://us2.php.net/manual/en/function.getimagesize.php

  7. #7
    Join Date
    Oct 2006
    Location
    Colorado Springs
    Posts
    134
    awesome, thank you! i'll play with this next week. Thanks!

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