• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1554
  • Last Modified:

Centering image in a DIV with IE6? (got it working in FF and IE7)

Hi there,

I have a image centered in a div using FF and IE7 using the following method.

.tagName { height: 200px; float: left; width: 100px; line-height: 200px; text-align:center;}
.tagContent1 {height: 200px; float: left; line-height: 200px; text-align:center; vertical-align: middle;}

        <div class="tagContent1">
            <a class="no-border" href="http//test.com">
                <img style="vertical-align:middle;" alt="test alt" src="http://www.test.com/Services/Images/gen.ashx?url=http://test.com/" />

this works great in FF and IE7, ie 6 isn't aligned correctly...

Then i read a document that said to make IE6 play nice you add a font-size the same size as height.. i.e. so i got this line now

.tagContent1 {height: 200px; float: left; line-height: 200px; text-align:center; vertical-align: middle; font-size: 200px; }

But this throws everything off inc ie7 and ff

my img which is inside the div as the following on it

<img style="vertical-align: middle;"  for testing..

It may have something to do with the doctype but i am using the following
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I know this is a real pain to do, as i see many others asking similar questions but i don't see a solution as yet...

Any advise really appreciated


1 Solution
always try and use the strict DOCTYPE
iangregson1Author Commented:
1.0 or 1.1, what is the difference?

but some of the css requires workarounds/hacks and using a strict doctype would prevent that no?
It appears that the image is actually centered inside the div.  The problem seems to be that the div doesn't have a specified width therefor it "snaps" tightly around the image with no room for the image to move left or right.  If you want to fix this, simply put a width of "100%" (or whatever your need is) and then the image should center within the div's specified width.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now