The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> how to display vertically centered image in a div
sakhi
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 21 2010, 10:16 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sakhi
post Apr 22 2010, 01:39 AM
Post #4





Group: Members
Posts: 3
Joined: 30-March 10
Member No.: 11,525



QUOTE(Frederiek @ Apr 21 2010, 09:22 AM) *

See http://www.w3.org/Style/Examples/007/center, if that doesn't interfere with the restrictions.



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 ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2010, 02:30 AM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:05 AM