how to display vertically centered image in a div |
how to display vertically centered image in a div |
sakhi |
Apr 21 2010, 09:14 AM
Post
#1
|
Group: Members Posts: 3 Joined: 30-March 10 Member No.: 11,525 |
hi,
In my html page , I have a div tag of fixed size (100px*75px) and i want an image (width=100px, height between 50px to 70px) to be displayed vertically centered in the div. If anyone has done this before Please share the solution. Restrictions: 1 - use html img tag. 2 - don't use CSS background-image property I tried below thigs but they didn't work. 1 - set style="vertical-align:middle" in <img> 2 - move <img> in 1*1 table and set valign= center in <table> Below is my html code: <div id="gallery"> <div id=""> <img src="sample_100_50.jpg" /> </div> </div> and the CSS code: .gallery{ height: 75px; overflow: hidden; position: relative; width: 100px; border:1px solid #DDDDDD; } Thanks in Advance Arpit |
Frederiek |
Apr 21 2010, 09:22 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
See http://www.w3.org/Style/Examples/007/center, if that doesn't interfere with the restrictions.
|
pandy |
Apr 21 2010, 10:16 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Alas IE8 is the only version of IE that 'display: table-cell works' in. Still, if it isn't critical for the layout I'd go with that.
|
sakhi |
Apr 22 2010, 01:39 AM
Post
#4
|
Group: Members Posts: 3 Joined: 30-March 10 Member No.: 11,525 |
Thanks Frederiek, but the solution mentioned here works in FireFox only. It doesn't work in IE8, IE7. How to make it work in IE ? |
Darin McGrew |
Apr 22 2010, 02:30 AM
Post
#5
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
It works in all the browsers I have available (Firefox, Chrome, Safari, Opera).
IIRC, only version 8 of MSIE supports "display: table-cell", so earlier versions won't support this technique. Here are some other references that describe vertical centering: http://www.student.oulu.fi/~laurirai/www/css/middle/ http://hicksdesign.co.uk/journal/how-to-ve...tering-with-css |
pandy |
Apr 22 2010, 02:30 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
If you mean display: table-cell it works in IE8 but not in previous versions of IE.
If the image is the only thing in the div faking it is easy. Just add equal top and bottom padding to the DIV. |
Lo-Fi Version | Time is now: 18th April 2024 - 05:08 AM |