?
Solved

CSS center image vertically and horizontally

Posted on 2006-05-03
15
Medium Priority
?
2,148 Views
Last Modified: 2010-08-05
I've go a bunch of different dimensioned images that I want centered with a div tag?
0
Comment
Question by:webdork
  • 6
  • 4
  • 2
  • +2
15 Comments
 
LVL 3

Expert Comment

by:purfus
ID: 16601716
http://webdesign.about.com/od/htmltags/ht/htdivcenter.htm


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

Expert Comment

by:purfus
ID: 16601734
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.  
0
 

Author Comment

by:webdork
ID: 16601764
thanks for responding. this does not center the image vertically.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:webdork
ID: 16601827
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>
0
 
LVL 5

Expert Comment

by:PhilHow
ID: 16602530
.item {
     vertical-align: middle;
     margin-top:108px;
}
0
 
LVL 7

Expert Comment

by:C TG
ID: 16603491
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...
0
 
LVL 8

Expert Comment

by:radnor
ID: 16604967
If they were ALL the SAME size you can do it.  

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

Author Comment

by:webdork
ID: 16605216
no php... I'm using asp
0
 
LVL 7

Expert Comment

by:C TG
ID: 16605535
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.
0
 
LVL 8

Expert Comment

by:radnor
ID: 16605638
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???
0
 

Author Comment

by:webdork
ID: 16605687
Yes
0
 
LVL 8

Expert Comment

by:radnor
ID: 16605745
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.....
0
 

Author Comment

by:webdork
ID: 16606385
What is the reference for the 108 number?

style="margin-top:108px
0
 
LVL 8

Accepted Solution

by:
radnor earned 2000 total points
ID: 16606490
it's ALMOST 1/2 of the height in the following line of code you posted

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

With hardcoded margin-top or left, you are assuming the pics are the same size.  You said in the question "bunch of different dimensioned images".

So you will have to go right 50% and back off 1/2 the width.  The ONLY problem with hardcoded positioning such as "margin-top:108px", take your screen from MAX to something smaller.  You will not be centered anymore.  
0
 

Author Comment

by:webdork
ID: 16606608
OK That works.

Can you look at my next question?

http://www.experts-exchange.com/Web/Q_21838164.html
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month13 days, 18 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question