Vetical and Horizontally Align an image in a box

Posted by Rhyso on Stack Overflow See other posts from Stack Overflow or by Rhyso
Published on 2010-05-18T11:38:04Z Indexed on 2010/05/18 11:40 UTC
Read the original article Hit count: 146

Filed under:

css-positioning

|

vertical-alignment

|

horizontal-alignment

|

image

The problem:

I have a set width and height image Lets say height:160px; width:200px; with an image in each box.

The image can vary in size but I need a solution that will always center the image vertically and horizontally within the box no matter what it's size.

Horizontal doesn't seem to be a problem by using margin: 0 auto but vertical is proving difficult. I have tried vertical align: center but this doesnt appear to work either

Any help is appriciated Thanks

© Stack Overflow or respective owner

Related posts about css-positioning

Best tool for developing CSS positioning code

as seen on Stack Overflow - Search for 'Stack Overflow'
What's the best way to develop CSS, in particular if it will play a role in formatting the page, etc. Is this best done by hand or with a particular editor? If by hand, how would you know the values needed to specify the positioning? If a tool is best, can VS2008/2010 do the job, or are there… >>> More
Difference in css-positioning in windows and linux

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a problem with rendering my html page by the same browsers in different OS. There are 3 spans and position of each span is corrected through css(position:relative). But I have found out that the page that looks correct in firefox under Linux, shows not right at the same firefox(3.5.7) under… >>> More
What can tables do that CSS positioning cannot?

as seen on Stack Overflow - Search for 'Stack Overflow'
I know there are various good arguments preferring css positioning over table-based layouts. What I'm wondering is whether the CSS model is complete (assuming a relatively modern browser) with respect to ALL of the capabilities of tables. Are there layouts that tables can achieve that are impossible… >>> More
CSS positioning breaks in Safari

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi all, i have a website in which i am trying to position (using CSS) a certain on the page. the is absolutely positioned and is located inside a relatively positioned paernt . on firefox and even IE it looks ok but on Safari, things get messy and it shows 5 pixels lower than it should. i have tried… >>> More
CSS positioning inside div

as seen on Stack Overflow - Search for 'Stack Overflow'
I am using a div with 2 elements inside and I want to position my 1st element to be vertically aligned top and 2nd element to the bottom of the div. The div is the right portion of my page and equal to the height of my main content. #right { float:right; width: 19%; background:#FF3300; … >>> More

Related posts about vertical-alignment

Vertical alignment problem in textbox in MS Word 2007

as seen on Super User - Search for 'Super User'
Hi, I pardon as its not a programming question at all. But if anybody can answer this it will be usefull for me. In MS word 2007 I drew a textbox and entered some text. Then I right clicked on textbox and went to format shape Then went to TextBox tab and reduced the top internal margin to 0.1… >>> More
Vertical alignment problem in textbox in Microsoft Word 2007

as seen on Super User - Search for 'Super User'
I pardon as its not a programming question at all. But if anybody can answer this it will be usefull for me. In MS word 2007 I drew a textbox and entered some text. Then I right clicked on textbox and went to format shape Then went to TextBox tab and reduced the top internal margin to 0.1 cm. But… >>> More
Vertical Alignment In a List Box

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I use a listbox in (visualC++ 2008) as a log window, and I use SetItemHeight() to obtain some space between entries. How can I align my entries vertically so that they are vertically centered? Thank You!!! >>> More
Visibility.Collapse does not work in WPF

as seen on Stack Overflow - Search for 'Stack Overflow'
Visibility.Collapse doesnt work in my case. below is the XAML. If i try to hide the lblCountry and cmbCountry a white space is shown between zip and practice fields. There is no option to hide an entire row of a Grid. <Grid> <Canvas Name="canDemographic" > </Canvas> … >>> More
Visibility.Collapse doesnt work

as seen on Stack Overflow - Search for 'Stack Overflow'
Visibility.Collapse doesnt work in my case. below is the XAML. If i try to hide the lblCountry and cmbCountry a white space is shown between zip and practice fields. There is no option to hide an entire row of a Grid. <Grid> <Canvas Name="canDemographic" > </Canvas> … >>> More