...

View Full Version : Vertically Align Image?



AlexanderC
09-18-2011, 07:02 PM
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!

Mr.
09-18-2011, 07:51 PM
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...



<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>

AlexanderC
09-18-2011, 11:24 PM
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.

Mr.
09-19-2011, 04:19 AM
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.

AlexanderC
09-19-2011, 05:24 AM
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.

Mr.
09-19-2011, 06:50 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum