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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Vertically Align Image?

    Hi,

    I need to vertically align an image inside a div so it appears in the middle of the div.

    I have about 15 thumbnails I need to align this way. What is the simplest way to do it? Searches have yielded little fruit.

    (I've tried putting the image inside a smaller div, and then aligning that div inside its container div using relative and absolute positionings, but this is very cumbersome and I image there is an easier way.)

    I do not want to make the image a background image.

    Thanks!
    Last edited by AlexanderC; 09-18-2011 at 08:41 PM.

  • #2
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    This can be used if your image is an exact square and your outer div is also an exact square. If not, simply take half the width of your img and set that as a negative margin left and half the height and set that as the negative margin top. Here is an example...

    Code:
    <title>Untitled Document</title>
    
    <style>
    
    #outside {
    	width: 200px;
    	height: 200px;
    	background: #F36;
    	position: relative;
    }
    
    #outside img {
    	display: block;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	width: 100px;
    	height: 100px;
    	margin-left: -50px;
    	margin-top: -50px;
    		
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div id="outside">
    
    <img src="#" />
    
    </div>
    
    </body>

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That's basically what I already did but thought it was cumbersome and am hoping there is a simpler way to achieve this given that I have a gallery and many images. Thanks.

  • #4
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by AlexanderC View Post
    That's basically what I already did but thought it was cumbersome and am hoping there is a simpler way to achieve this given that I have a gallery and many images. Thanks.
    It's actually very simple if you use a class on each of your images and divs. You said you wanted to do it without using an inner div.... so you didn't do it this way like I showed you.

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    no... i did use an inner div.

    I thought about using a class. I don't really know how those work though so I might be looking it up. Thanks.

  • #6
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by AlexanderC View Post
    no... i did use an inner div.

    I thought about using a class. I don't really know how those work though so I might be looking it up. Thanks.
    Exactly... you did use an inner div. The way I am showing you does not require an inner div.


  •  

    Posting Permissions

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