SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertically align a image in div

    i need to vertically align a thumbnail image within a div. the images size are re-size to 50 by 50 using a php script. because some images are too wide and too short, they tend to align top within the div. text-align:center isnt a problem but I'm facing problem with vertical-align:middle. i did tried setting display:table-cells but it would affect the width and height.

    this is my codes:
    Code:
    <div class="profile_user_thumb"><a href="#"><img src="image.jpg" width="50" height="50"></a></div>
    this is my css:
    Code:
    .profile_user_thumb{
    overflow:hidden;
    width:50px;
    height:50px;
    border:1px solid #D5D3D3;
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    }
    Last edited by nuttynibbles; Jan 29, 2009 at 00:19.

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the container has a set height, set a line-height the same.
    If the container has not a set height, the tallest image will, and the tallest image will set a line-height the same.

    Then the inline images can be vertically aligned:

    Code:
    #.profile_user_thumb{
    	height:50px;
    	line-height:50px;
    }
    #.profile_user_thumbimg{
    	vertical-align:middle;
    }
    Edit:

    Correct code:
    Code:
    .profile_user_thumb{
    	height:50px;
    	line-height:50px;
    }
    .profile_user_thumb img{
    	vertical-align:middle;
    }
    Last edited by Erik J; Jan 29, 2009 at 01:19.
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wat is the profile_user_thumbimg for?? how should i use go about using ur css style?

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nuttynibbles View Post
    wat is the profile_user_thumbimg for?? how should i use go about using ur css style?
    Code 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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .profile_user_thumb{
        height:50px;
        line-height:50px;
    }
    .profile_user_thumbimg{
        vertical-align:middle;
    }
        </style>
    </head>
    <body><!-- The Start of the Markup -->
    <div class="profile_user_thumb"><a href="#"><img src="image.jpg" width="50" height="50"></a></div>
    </body>
    </html>

    erik, you included an ID and a Class.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i dont see profile_user_thumbimg being set anywhere.. is it suppose to be set in <img>??

  6. #6
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nuttynibbles View Post
    i dont see profile_user_thumbimg being set anywhere.. is it suppose to be set in <img>??

    Code CSS:
    .profile_user_thumb{
        height:50px;
        line-height:50px;
    }

    This CSS is referencing to the containing Class which is your div.


    Code HTML4Strict:
    <div class="profile_user_thumb"></div>

    Code CSS:
    [FONT=monospace].profile_user_thumbimg{
        vertical-align:middle;
    }[/FONT]

    This CSS is referencing towards the Image that's being displayed.

    Code HTML4Strict:
    [FONT=monospace]<a href="#"><img src="image.jpg" width="50" height="50"></a>[/FONT]
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nuttynibbles View Post
    wat is the profile_user_thumbimg for?? how should i use go about using ur css style?
    It was a id typo and a missing space.

    The selector should be ".profile_user_thumb img" to target the images.
    Happy ADD/ADHD with Asperger's

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm tks but it isnt working..

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    This may be helpful if you still need other alternatives.

    Vertical aligning elements of random heights

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What are the actual if set div height, and what can the images dimensions be?

    In your code the images are filling the height of the div and vertical alignment is not changing anything. To align in the middle the image of course must be lower than the div/line-height.
    Happy ADD/ADHD with Asperger's

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okie the div is set to be 50px x 50px and for example, the image is 50px &#215; 33px.

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    okie the div is set to be 50px x 50px
    Then use display:table and set the width and height at 50px. Then if an image is 33px or any other random height it will center vertically with vertical-align: middle; as seen in the link I posted above.

  13. #13
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the div is set to be 50px x 50px and for example, the image is 50px &#215; 33px.
    Then if the div is given a line-height of 50px and the image is given the vertical-align it should align accordingly, if you have not floated it or displayed block.
    Happy ADD/ADHD with Asperger's

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hmm tks but it isnt working..
    @ nuttynibbles,

    Erik's line-height suggestion is working just fine.
    Vertical Align with Line-Height

  15. #15
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Erik's line-height suggestion is working just fine.
    Not in IE6 though.

  16. #16
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is my code n attached is the image but i cant still get it to work..

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style>
    .profile_user_thumb{
    display:table
    width:50px;
    height:50px;
    line-height:50px;
    border:1px solid #D5D3D3;
    text-align:center;
    }
    .profile_user_thumb img{
    vertical-align:middle;
    }
    </style>	
    </head>
    <body>
    <div class="profile_friendlist_thumb">
    	<img src="50_33.JPG" alt="Eneres" title="Eneres" width="50" height="33">
    </div>
    </body>
    </html>
    Attached Images Attached Images

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could do something like this which will also work in IE.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style>
    .profile_user_thumb {
        display:table-cell;
        width:50px;
        height:50px;
        line-height:50px;
        border:1px solid #D5D3D3;
        text-align:center;
        background:red;
        vertical-align:middle;
    }
    .profile_user_thumb img {
        display:block
    }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    .profile_user_thumb{overflow:hidden;float:left}
    .profile_user_thumb span{
        position:relative;
        top:50&#37;;
        float:left;
    }
    .profile_user_thumb span img{
        position:relative;
        top:-50%;
        float:left
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="profile_user_thumb"> <span><img src="http://www.sitepoint.com/forums/attachment.php?attachmentid=51512&d=1233228754" alt="Eneres" title="Eneres" width="50" height="33"></span> </div>
    <div class="profile_user_thumb"><span><img src="http://www.sitepoint.com/forums/attachment.php?attachmentid=51512&d=1233228754" alt="Eneres" title="Eneres" width="50" height="15"></span> </div>
    <div class="profile_user_thumb"><span><img src="http://www.sitepoint.com/forums/attachment.php?attachmentid=51512&d=1233228754" alt="Eneres" title="Eneres" width="50" height="40"> </span> </div>
    </body>
    </html>
    (note that you had errors in your css where you forgot the commas after display:table and addressed the wrong class in the html)


    There was a similar example in this recent thread.

  18. #18
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okie tks paul. it works..hmm but it seems it can only work in IE7 if display:block
    is replaced with display:table-cell

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    No, it works fine in IE7 as I checked. You must have changed something inadvertantly.

    IE7 doesn't understand display:table-cell anyway

  20. #20
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nuttynibbles View Post
    here is my code n attached is the image but i cant still get it to work..
    In order not to add to the html, this way you can get the image vertical-align working:

    Adding a font-size forces IE6 to align the image. Unfortunate it disturbes good browsers, but as IE now seems to prefer the font-size instead of line-height, I adjusted the line-height approximately for good browsers. N.b. IE8 not tested but hopefully works either way.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style>
    .profile_user_thumb{
    width:50px;
    height:50px;
    line-height:50px;
    border:1px solid #D5D3D3;
    text-align:center;
    font-size:45px;
    line-height:.94;
    }
    .profile_user_thumb img{
    vertical-align:middle;
    }
    </style>	
    </head>
    <body>
    <div class="profile_friendlist_thumb">
    	<img src="50_33.JPG" alt="Eneres" title="Eneres" width="50" height="33">
    </div>
    </body>
    </html>
    Here is the test setup:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centering an image using vertical align</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    /* IE7 applies leadings on the white-space induced text-line, affecting the image */
    .profile_user_thumb1 {
    	float:left;
    	border:1px solid #d5d3d3;
    	width:50px;
    	height:500px;
    	text-align:center;
    	line-height:500px;
    }
    .profile_user_thumb1 img {
    	vertical-align:top; /* ignored in IE6-7 (IE8 not tested )*/
    }
    /* good browsers applies the vertical align on the image according to the line-height */
    .profile_user_thumb2 {
    	float:left;
    	border:1px solid #d5d3d3;
    	width:50px;
    	height:500px;
    	text-align:center;
    	line-height:500px;
    }
    .profile_user_thumb2 img {
    	vertical-align:middle;
    }
    /* IE6-7 applies the vertical align on the image but uses the font-height instead of default line-height */
    /* good browsers applies the vertical align on the default line-height (1.2 * current font-size = 540px) */
    .profile_user_thumb3 {
    	float:left;
    	border:1px solid #d5d3d3;
    	width:50px;
    	height:500px;
    	text-align:center;
    	font-size:450px; /* 0.9 times the div height */
    }
    .profile_user_thumb3 img {
    	vertical-align:middle;
    }
    /* setting both font-size and line-height the same works in all browsers (IE8 not tested) */
    /* in good browsers the font-size affects the vertical alignment in different directions */
    .profile_user_thumb4 {
    	float:left;
    	border:1px solid #d5d3d3;
    	width:50px;
    	height:500px;
    	text-align:center;
    	line-height:500px;
    	font-size:450px;
    }
    .profile_user_thumb4 img {
    	vertical-align:middle;
    }
    /* optimised vertical alignment in IE and FF and Safari, Opera needs line-height 1.02 */
    .profile_user_thumb5 {
    	float:left;
    	border:1px solid #d5d3d3;
    	width:50px;
    	height:500px;
    	text-align:center;
    /*	line-height:1.02; /* Opera */
    	line-height:0.94; /* FF Safari */
    	font-size:450px;  /* IE6-7 (0.9 times the container height) */
    }
    .profile_user_thumb5 img {
    	vertical-align:middle;
    }
    </style></head><body>
     
    <div class="profile_user_thumb1"><img src="50_33.JPG" alt="Strawberry" width="50" height="33">
    <!-- IE7 uses a text-line to apply lineheight leadings before and after the image --></div>
    <div class="profile_user_thumb2"><img src="50_33.JPG" alt="Strawberry" width="50" height="33"></div>
    <div class="profile_user_thumb3"><img src="50_33.JPG" alt="Strawberry" width="50" height="33"></div>
    <div class="profile_user_thumb4"><img src="50_33.JPG" alt="Strawberry" width="50" height="33"></div>
    <div class="profile_user_thumb5"><img src="50_33.JPG" alt="Strawberry" width="50" height="33"></div>
     
    </body></html>
    Happy ADD/ADHD with Asperger's

  21. #21
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey guys, thanks alot for all your suggestions. appreciate =).

    but well i think the problem is related to these few factors:
    1) photos are uploaded. if the width / height is bigger than 300px, it will be cropped to 300px.
    2) like any photo album, these photos will be displayed as in thumbnail and in bigger size.
    3) as i have initially stated my problems above, i wanted to align the image center n vertically middle because i will resize the bigger photo of 300px which was cropped earlier to a thumbnail size of 80px x 80px. note: the resize is not permernant as it is only done in html. therefore, the image will look pixelated if i do that. i tried some free image resizer but didnt help
    4) i need some advise:
    -should I keep 2 different images of thumbnail n bigger photo?
    -if i do that, it would increase disk space.

    Thank you all..

  22. #22
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    4) i need some advise:
    -should I keep 2 different images of thumbnail n bigger photo?
    -if i do that, it would increase disk space.
    Yes, you should make a different thumbnail image and link that to the bigger photo. Then the visitor don't have to wait downloading the big images before seeing them as thumbs.

    I often use the free XnView to resize images.
    Happy ADD/ADHD with Asperger's


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
  •