Using the code below, the image sits at the top of the div box. How do i set the image in the middle of the div box? I've set vertical-align:middle on the image but it has no affect. CSS
.divEditMode {
display:block;
float:left;
height:300px;
width:300px;
border: 1px solid black;
}
HTML
<div class="divEditMode">
<img id="" class="imgEditMode" />
</div>
- Why not display the image as the background-image? .divEditMode { background: url('./image/....') center center no-repeat; }
2 answers
points
Only table elements can use vertical-align unfortunately :(
There is no pure CSS way of vertically centering in a non-table element. You can either mauanlly set the margin-top for an image to push it down into the required place, or you can do something fancy with Javascript to work out how much margin-top to apply to images; you could get the height of the container, take away the height of the image and divide the remainder by 2 to get roughly the amount of margin-top required. Or you can use a table.
All of these have drawbacks - manually setting the margin-top of each image means more work for you, using JS is ok but will screw up if JS is disabled. Tables are just non-semantic in this context but unfortunately are the quickest, easiest and least prone to failure.
point
You can use this solution, but I'm not sure it will work with the IE family. Plus, you need to be sure of your picture dimensions.
.imgEditMode {
position:relative;
top:50%;
left:50%;
margin-top:-8px;
margin-left:-8px;
}
Where 16px is the width and height of your image.
