CSS center image vertically and horizontally

http://webdesign.about.com/od/htmltags/ht/htdivcenter.htm


very simple thing to do, the above link describes it in detail.

BTW, the "text-align: center;" is the important part to consider with the css.  This is what you would put into the class definition if your using css in external files.  

thanks for responding. this does not center the image vertically.

Why doesnt this work?

Here is my container:

#container {
   margin: auto;
   padding: 0px 0px 0px 0px;
   text-align: center;
   width: 445px;
   height: 445px;
   background-color: #EEEEEE;
}

.item {
     vertical-align: middle;
}

<div id="container"><img src="images/portfolio_furniture.jpg" width="344" height="229" class="item" /></div>

.item {
     vertical-align: middle;
     margin-top:108px;
}

Philow solution can be corect in case every image you'll use in "item" class will have the same 229px height....
To be sure you can reuse your "item" class with other image heights you can specify the margin-top argument in the img tag like:

.item {
     vertical-align: middle;
}

<div id="container"><img src="images/portfolio_furniture.jpg" width="344" height="229" class="item" style="margin-top:108px;" /></div>

this will force your image to be aligned ... without even use the vertical-align attribute in your class...

If they were ALL the SAME size you can do it.  

Will have to look at something...  Do you have PHP avail????

no php... I'm using asp

The vertical-align even is specified by CSS ... it isn;t implemented well by browsers ... I've tryed to use it too but does not work ...

So what I was telling is to put the margin-top: (value)px in the style attribute of your image tag not in your class thinking that you're images will not be all the same height so you can specify it on each image individually without having to create separate classes for each height. You can calculate the value using javascript or asp.

Too bad, in PHP you can get the size of the image and "adjust" the style sheet.  

Can you get the size of the image in ASP???

Yes

Well....

get the image size.

write this out as a style sheet:

<style>
.img_style {
   position: absolute;
   left: 50%;
   margin-left: - (WIDTH/2);
   top: 50%;
   margin-top: - (HEIGHT/2);
</style>

<img class="img_style" src="....." />

The left and top margins are NEGATIVE numbers (one half the size).

Try that and see.....

What is the reference for the 108 number?

style="margin-top:108px

OK That works.

Can you look at my next question?

https://www.experts-exchange.com/questions/21838164/Javascript-mouseover-extra-parameter.html