By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,730 Members | 1,480 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,730 IT Pros & Developers. It's quick & easy.

How to center an image using CSS in both IE and Mozzila

P: n/a

We are using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Using CSS (not html since align=center and <center> are deprecated)

I can get it to work in IE6 (but not NS 7 or Firefox) with.
<div style="text-align:center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>

I can get it to work in NS 7 or Firefox (but not IE6) with.
<div style="text-align:-moz-center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>

I've seen many solutions that work in IE only does anyone know how to do it
in both?

Thanks

Mike
Jul 21 '05 #1
Share this Question
Share on Google+
13 Replies


P: n/a
On Wed, 10 Nov 2004 14:43:03 -0500, Mike <no**@nospam.com> wrote:

We are using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Oh goody.
Using CSS (not html since align=center and <center> are deprecated)


Indeed. Though, why are you bothering to use a loose DTD if you're
avoiding deprecated markup?

<div style="text-align: center;"><img src="myimg.gif" alt="My logo"
width="201" height="56" /></div>

Note:

1) As img is in a block element, there's no point in display: block;

2) When using XHTML served to HTML browsers you need a space <img />
before the slash.
Jul 21 '05 #2

P: n/a
Once upon a time *Mike* wrote:
We are using:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Using CSS (not html since align=center and <center> are deprecated)

I can get it to work in IE6 (but not NS 7 or Firefox) with.
<div style="text-align:center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>


That works very well in Mozilla 1.7.3 so I wonder why Firefox and NS 7
is so different? Do you really need the "display:block" there? Not that
I know if it makes any different (it does'nt in Moz 1.7) but still....

--
/Arne
http://w1.978.telia.com/~u97802964/
Jul 21 '05 #3

P: n/a
On Wed, 10 Nov 2004 14:43:03 -0500, Mike wrote:
I can get it to work in IE6 (but not NS 7 or Firefox) with.
<div style="text-align:center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>

I can get it to work in NS 7 or Firefox (but not IE6) with.
<div style="text-align:-moz-center; display:block; "><img src="myimg.gif"
alt="My logo" width="201" height="56"/></div>

I've seen many solutions that work in IE only does anyone know how to do it
in both?


This *might* be a job for either CSS import hacks or
IE conditional comments. (If both you understand the
problem correctly and I understand you correctly.)

Hark.. ( listens for the sound of being shouted down.. ;)

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane
Jul 21 '05 #4

P: n/a
*Mike* <no**@nospam.com>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Using CSS (not html since align=center and <center> are deprecated)
Why Transitional then?
<div style="text-align:center; display:block; ">
'Div's are already 'block' by default.
<img src="myimg.gif" alt="My logo" width="201" height="56"/></div>


It works this way in any CSS enabled browser (except for the ending of the
'img' tag, which doesn't conform to XHTML*1.0 Annex C), e.g. Mozilla,
Opera and even IE. I don't see your problem.

--
Proudly sent from eContinent.
Jul 21 '05 #5

P: n/a
On Wed, 10 Nov 2004 21:19:53 +0100, Christoph Paeper wrote:
*Mike* <no**@nospam.com>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Using CSS (not html since align=center and <center> are deprecated)


Why Transitional then?


In case we wish to switch our site to strict in the future it will be less
painful.
<div style="text-align:center; display:block; ">


'Div's are already 'block' by default.
<img src="myimg.gif" alt="My logo" width="201" height="56"/></div>


It works this way in any CSS enabled browser (except for the ending of the
'img' tag, which doesn't conform to XHTML*1.0 Annex C), e.g. Mozilla,
Opera and even IE. I don't see your problem.


Ok it turns out that there was a problem with the style sheet. The Style
sheet contained the following line: "img { display: block; border: 0; }
The display: block was causing the problem. Once I took it out of the style
sheet, using <div style="text-align:-moz-center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>, worked in both browsers
properly.


Jul 21 '05 #6

P: n/a

By the way, is the following the best way to center an image Using CSS (not
html since align=center and <center> are deprecated)?

div style="text-align:center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>

Can you point me to a standard that says an image is a block?

Thanks
Jul 21 '05 #7

P: n/a
On Fri, 12 Nov 2004 10:49:41 -0500, Mike wrote:
div style="text-align:center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>

Can you point me to a standard ..
<http://www.w3.org/TR/REC-html40/index/elements.html>
.. that says an image is a block?
Please learn how to quote Mike, and how to interpret the
in-line (with trimming) style that others use. For example,
Christoph did *not* say that images were block level, here
is a copy of the thread at the time.

<quoting deleted text>
(You) <div style="text-align:center; display:block; ">
(Christoph)
'Div's are already 'block' by default.
<img src="myimg.gif" alt="My logo" width="201" height="56"/></div>


It works this way in any CSS enabled bro....
</quoting deleted text>

Christoph was commenting that *div*s are block level, that
is why he put his comment directly after the div element.
Your image element came after that..

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane
Jul 21 '05 #8

P: n/a
On Fri, 12 Nov 2004 10:49:41 -0500, Mike wrote:
By the way, is the following the best way to center an image Using CSS (not
html since align=center and <center> are deprecated)?

div style="text-align:center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>

Can you point me to a standard that says an image is a block?

Thanks


I see that style="margin: auto" works as well and seems like it might be a
better approach. Any opinions?
Jul 21 '05 #9

P: n/a
*Mike* <no**@nospam.com>:
On Wed, 10 Nov 2004 21:19:53 +0100, Christoph Paeper wrote:
*Mike* <no**@nospam.com>:
Using CSS (not html since align=center and <center> are deprecated)


Why [XHTML 1.0] Transitional then?


In case we wish to switch our site to strict in the future it will be
less painful.


Uh, what? You don't want to use deprecated elements and attributes, but
still want to stick with Transitional? I just don't get it.
Ok it turns out that there was a problem with the style sheet. The Style
sheet contained the following line: "img { display: block; border: 0; }
You come here with a assumably minimised testcase---which is a good
thing---and then there's still another stylesheet involved?
The display: block was causing the problem.


Of course. If you had shown it or given an test URL, I (or someone else)
would have told you.

| is the following the best way to center an image Using CSS (...)?
|
| <div style="text-align:center;"><img src="myimg.gif"
| alt="My logo" width="201" height="56" /></div>

That depends.
The best way of centering the inline contents of an 'div' is "text-align:
center". Preferably not in a 'style' attribute, though.
The best way of centering an image inside a container that has other
inline children as well (like text), that shall to be centered, is

img {display: block; margin: auto;}.

That doesn't work in some browsers or (insane) browser modes, though.

| Can you point me to a standard that says an image is a block?

'Img's are not, but 'div's are. That's why 'text-align' works; it applies
to a block-level element and affects its inline-level children. "Margin:
auto" is the approach for block-level elements themselves. 'Display' is
the property to change between 'block' and 'inline' (among others, e.g.
'inline-block'). That's pretty much CSS basics.

--
Useless Fact #4:
Coca Cola was originally green.
Jul 21 '05 #10

P: n/a
On Fri, 12 Nov 2004 19:24:21 +0100, Christoph Paeper wrote:
In case we wish to switch our site to strict in the future it will be
less painful.
Uh, what? You don't want to use deprecated elements and attributes, but
still want to stick with Transitional? I just don't get it.


Am I missing something here, should we not try to make our site more strict
for the chance of a future DTD upgrade? We would like to go all strict now,
but there are too many old and buggy browsers out there to go through with
it. When a browser sees Transitional, will the strict coding throw them off
some how?

Ok it turns out that there was a problem with the style sheet. The Style
sheet contained the following line: "img { display: block; border: 0; }


You come here with a assumably minimised testcase---which is a good
thing---and then there's still another stylesheet involved?


Yes, I'm still learning. I would have provided a link but the site is in
development in house at this time.
The display: block was causing the problem.
Of course. If you had shown it or given an test URL, I (or someone else)
would have told you.

| is the following the best way to center an image Using CSS (...)?
|
| <div style="text-align:center;"><img src="myimg.gif"
| alt="My logo" width="201" height="56" /></div>

That depends.
The best way of centering the inline contents of an 'div' is "text-align:
center". Preferably not in a 'style' attribute, though.
The best way of centering an image inside a container that has other
inline children as well (like text), that shall to be centered, is

img {display: block; margin: auto;}.

That doesn't work in some browsers or (insane) browser modes, though.


The above will work for about the 80% of our customers who use IE6, NS 6,
Firefox and greater versions, but there are still a lot of IE 5.5 users out
there according to last months stats. Still it is probably the way we will
go as the positioning of an img will not alter the content to much.

Another funny thing is that Dreamweaver 7 displays the img {display: block;
margin: auto;} images as left justified like IE 5.5.

| Can you point me to a standard that says an image is a block?

'Img's are not, but 'div's are. That's why 'text-align' works; it applies
to a block-level element and affects its inline-level children. "Margin:
auto" is the approach for block-level elements themselves. 'Display' is
the property to change between 'block' and 'inline' (among others, e.g.
'inline-block'). That's pretty much CSS basics.

Jul 21 '05 #11

P: n/a
On Fri, 12 Nov 2004, Mike wrote:
Am I missing something here, should we not try to make our site more
strict for the chance of a future DTD upgrade?
It's a judgment call, but I'd say a definite "yes" to that.
We would like to go all strict now, but there are too many old and
buggy browsers out there to go through with it.
That depends on what you are trying to achieve. You rate to get
better results (cosmetically) if you get rid of that legacy HTML/3.2
crud, at least for new documents, and concentrate on using CSS for the
presentation. If you do that properly, then there are recognised
techniques for shielding old and CSS-buggy browsers: they can still
get the structural HTML, and display the content as HTML intended,
even if the cosmetics of the result leave something to be desired.

You're the one who has to decide which is more important to you: best
results with modern browser, or dragging modern browsers down to the
level of old and buggy browsers in the interests of compatibility. And
I say that as someone who has lived right through the lean years of
HTML/3.2(spit) and done all of that legacy crud, and many of my pages
are still infested by it. If/when I ever get time, I'll be only too
happy to rid myself of it, and - as I say - my advice to you would be,
at any rate for newly made pages, to keep clear of it. Users of old
browsers have their own reasons for staying with them, and IMHO have
every right to expect to browse your content - but they don't have
much right to expect a beautiful and harmonious visual result.
When a browser sees Transitional, will the strict coding throw them off
some how?


It's certainly "on the cards" that a browser designer would treat
strict as calling for specification-conforming results, while
transitional would be treated as a request for reproducing the popular
bugs in old browsers (like the so-called "quirks" mode).

After all, "transitional" was defined over half a decade back. So I
ask you, when are you finally going to make that "transition"? I'm
stuck with a legacy of old ballast, that I'd be only too glad to be
rid of: you've less excuse for starting that now, half a decade later.

good luck

I guess that means I know what to ask Santa for. But whether I'll get
it is another matter. SCNR.
Jul 21 '05 #12

P: n/a
Mike wrote:
On Fri, 12 Nov 2004 10:49:41 -0500, Mike wrote:
div style="text-align:center;"><img src="myimg.gif"
alt="My logo" width="201" height="56" /></div>

That's one way. text-align: center; centers the content of the element
within the box, whereas...
I see that style="margin: auto" works as well and seems like it might be a
better approach. Any opinions?


....setting left and right margins to 'auto', centers the box
horizontally within the containing block. In this case, margin: auto;
is effectively the same as saying:
margin-left: auto;
margin-right: auto;

Even though 'margin-top' and 'margin-bottom' are also being set to
'auto', they have essentially no effect since, (in most cases) their
computed values are 0. They do not center the box vertically, as many
people think when they find out that is true for 'margin-left' and
'margin-right'.

The difference between setting margins and text-align is best
illustrated with an example. Load the following up in Firefox, Mozilla,
Opera or another browser that supports data: URIs. IE doesn't.

data:text/html;charset=utf-8;base64,PCFET0NUWVBFIEhUTUwgUFVCTElDICItLy9XM0MvL 0RURCBIVE1MIDQuMDEvL0VOIg0KICAgImh0dHA6Ly93d3cudzM ub3JnL1RSL2h0bWw0L3N0cmljdC5kdGQiPg0KPGh0bWwgbGFuZ z0iZW4iPg0KPGhlYWQ%2BDQoJPHRpdGxlPk1hcmdpbnMgYW5kI HRleHQtYWxpZ248L3RpdGxlPg0KCTxtZXRhIGh0dHAtZXF1aXY 9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1sO2NoY XJzZXQ9dXRmLTgiPg0KCTxtZXRhIGh0dHAtZXF1aXY9IkNvbnR lbnQtU3R5bGUtVHlwZSIgY29udGVudD0idGV4dC9jc3MiPg0KC TxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BDQoJcCB7IHdpZHRoO iA1MCU7IGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOyB9DQoJPC9 zdHlsZT4NCjwvaGVhZD4NCjxib2R5Pg0KICAgIDxwIHN0eWxlP SJ0ZXh0LWFsaWduOmNlbnRlcjsiPlRoaXMgbGluZSBoYXMgdGh lDQogICAgICAgIHN0eWxlIDxjb2RlPnRleHQtYWxpZ246Y2Vud GVyOzwvY29kZT4uDQogICAgICAgIExvcmVtIGlwc3VtIGRvbG9 yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ZXIgYWRpcGlzY2luZyBlb Gl0LiBQaGFzZWxsdXMgZWxlaWZlbmQuIEluIGhhYyBoYWJpdGF zc2UgcGxhdGVhIGRpY3R1bXN0LiBWZXN0aWJ1bHVtIGluIHRvc nRvciB1dCBvcmNpIHByZXRpdW0gYmliZW5kdW0uPC9wPg0KDQo gICAgPHAgc3R5bGU9Im1hcmdpbi1sZWZ0OmF1dG87bWFyZ2luL XJpZ2h0OmF1d
G87Ij5UaGlzIGxpbmUgaGFzIHRoZQ0KICAgICAgICBzdHlsZSA 8Y29kZT5tYXJnaW4tbGVmdDphdXRvO21hcmdpbi1yaWdodDphd XRvOzwvY29kZT4uDQogICAgICAgIExvcmVtIGlwc3VtIGRvbG9 yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ZXIgYWRpcGlzY2luZyBlb Gl0LiBQaGFzZWxsdXMgZWxlaWZlbmQuIEluIGhhYyBoYWJpdGF zc2UgcGxhdGVhIGRpY3R1bXN0LiBWZXN0aWJ1bHVtIGluIHRvc nRvciB1dCBvcmNpIHByZXRpdW0gYmliZW5kdW0uPC9wPg0KPC9 ib2R5Pg0KPC9odG1sPg%3D%3D

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web
Jul 21 '05 #13

P: n/a
Lachlan Hunt wrote:
data:text/html;charset=utf-8;base64,PCFET0NUWVBFIEhUTUwgUFVCTElDICItLy9XM0MvL 0RURCBIVE1MIDQuMDEvL0VOIg0KICAgImh0dHA6Ly93d3cudzM ub3JnL1RSL2h0bWw0L3N0cmljdC5kdGQiPg0KPGh0bWwgbGFuZ z0iZW4iPg0KPGhlYWQ%2BDQoJPHRpdGxlPk1hcmdpbnMgYW5kI HRleHQtYWxpZ248L3RpdGxlPg0KCTxtZXRhIGh0dHAtZXF1aXY 9ImNvbnRlbnQtdHlwZSIgY29udGVudD0idGV4dC9odG1sO2NoY XJzZXQ9dXRmLTgiPg0KCTxtZXRhIGh0dHAtZXF1aXY9IkNvbnR lbnQtU3R5bGUtVHlwZSIgY29udGVudD0idGV4dC9jc3MiPg0KC TxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BDQoJcCB7IHdpZHRoO iA1MCU7IGJvcmRlcjogMXB4IHNvbGlkIGJsYWNrOyB9DQoJPC9 zdHlsZT4NCjwvaGVhZD4NCjxib2R5Pg0KICAgIDxwIHN0eWxlP SJ0ZXh0LWFsaWduOmNlbnRlcjsiPlRoaXMgbGluZSBoYXMgdGh lDQogICAgICAgIHN0eWxlIDxjb2RlPnRleHQtYWxpZ246Y2Vud GVyOzwvY29kZT4uDQogICAgICAgIExvcmVtIGlwc3VtIGRvbG9 yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ZXIgYWRpcGlzY2luZyBlb Gl0LiBQaGFzZWxsdXMgZWxlaWZlbmQuIEluIGhhYyBoYWJpdGF zc2UgcGxhdGVhIGRpY3R1bXN0LiBWZXN0aWJ1bHVtIGluIHRvc nRvciB1dCBvcmNpIHByZXRpdW0gYmliZW5kdW0uPC9wPg0KDQo gICAgPHAgc3R5bGU9Im1hcmdpbi1sZWZ0OmF1dG87bWFyZ2luL XJpZ2h0OmF 1d G87Ij5UaGlzIGxpbmUgaGFzIHRoZQ0KICAgICAgICBzdHlsZSA 8Y29kZT5tYXJnaW4tbGVmdDphdXRvO21hcmdpbi1yaWdodDphd XRvOzwvY29kZT4uDQogICAgICAgIExvcmVtIGlwc3VtIGRvbG9 yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ZXIgYWRpcGlzY2luZyBlb Gl0LiBQaGFzZWxsdXMgZWxlaWZlbmQuIEluIGhhYyBoYWJpdGF zc2UgcGxhdGVhIGRpY3R1bXN0LiBWZXN0aWJ1bHVtIGluIHRvc nRvciB1dCBvcmNpIHByZXRpdW0gYmliZW5kdW0uPC9wPg0KPC9 ib2R5Pg0KPC9odG1sPg%3D%3D


That wasn't supposed to wrap. Copy it and make sure it's all on one
line for it to work, or just use the following source and make your own
file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Margins and text-align</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
p { width: 50%; border: 1px solid black; }
</style>
</head>
<body>
<p style="text-align:center;">This line has the
style <code>text-align:center;</code>.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus eleifend. In hac habitasse platea dictumst. Vestibulum in
tortor ut orci pretium bibendum.</p>

<p style="margin-left:auto;margin-right:auto;">This line has the
style <code>margin-left:auto;margin-right:auto;</code>.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus eleifend. In hac habitasse platea dictumst. Vestibulum in
tortor ut orci pretium bibendum.</p>
</body>
</html>

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://SpreadFirefox.com/ Igniting the Web
Jul 21 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.