Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post

    Align image vertically

    I'm trying to position an image within a div using css. I want it to be roughly in the centre (vertically). The only thing within the div is the image and nothing else, however the height is not given and can vary.

    Does anyone have anyideas how to do this using just css and/or some (extra) tags?

    This is the html i'm using:
    Code:
    <div style="width: 40px; height: 100%"><img src="images/delux.gif" /></div>
    N.B. This div is within a container div, but i don't think that makes a difference.

    Many thanks in advance,
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #2
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try searching the forums for "vertical align" and tell us how you get on .

  • #3
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Alter it so that the image is set as the background of the div and not within it.

    Code:
    #id/.class { background: url(image-path) no-repeat center; height: abpx; }
    Align it to centre and it should do it all for you horizontally and vertically.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    @ Chilipie:

    Thanks for replying. I've had a browse of the search results for "vertical align" with and without images, and i've tried a few 'solutions' but nothing seems to work. They either require you know the height of the div or don't work lol

    @ evo:

    Thanks also for replying but doesn't your method also require i know the height of the div layer, which i unfortunately don't. It's in a container which expands depending on the other content in the container.

    However I've had a bit of a thought about it and may have had an idea how to do it. I'll try and let you all know how I get on.

    Cheers again,
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #5
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    It doesn't need the height property.



  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thanks again for replying. I've actually decided that in the situation that i want to implement it, it is not possible, as it's not possible to define the height of the container div or any div for that matter, and therefore the div with the image in it just expands to 50% of the screen size. However evo I can see that your idea works, thanks for the solution, just a shame I can't actually implement it

    Thanks again
    Rich

    "An expert is a person who has made all the mistakes that can be made in a very narrow field."

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Badman3k
    The only thing within the div is the image and nothing else, however the height is not given and can vary
    It sounds like evo's background suggestion would work if you gave the div a min-height, so you're assured it's at least tall enough for the image but could be taller if necessary.

    Here's a great way to make it work in IE as well...

    Today I discovered how to make min-height work in Internet Explorer
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.


  •  

    Posting Permissions

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