Center-Aligning elements

[gaijinco]

I was a hobbist web coder for years but I had to sidestep for a while.
Now I'm trying to return to it and I'm trying to clarify how am I
supposed to do somethings with CSS v.s. HTML and I'm specially having
difficulties with center alignment of elements like images and tables.
How is the "right" way to do it? (books that I have checked seemed to
dodge the issue)

I also have a doubt. html-atributes width and height are preferred
over css-properties for images and tables?

Thanks.

[dorayme]

In article
<95**********************************@25g2000hsx.g ooglegroups.com>,
gaijinco <ga******@gmail.comwrote:

I was a hobbist web coder for years but I had to sidestep for a while.
Now I'm trying to return to it and I'm trying to clarify how am I
supposed to do somethings with CSS v.s. HTML and I'm specially having
difficulties with center alignment of elements like images and tables.
How is the "right" way to do it? (books that I have checked seemed to
dodge the issue)

I also have a doubt. html-atributes width and height are preferred
over css-properties for images and tables?

You can centre an element by stating a width and auto left and right
margin for it in the css. This will do the trick in most modern
browsers, use a strict doctype like 4.01:

..element {
width: 30units;
margin: auto;
}

and

<div class="element">div</div>

or

<div class="element"><img src="..." ...></div>

or indeed, quite often,

<img class="element" ...>

With an image, the "units" in px is mostly appropriate

--
dorayme

[Jukka K. Korpela]

Scripsit gaijinco:

I'm specially having
difficulties with center alignment of elements like images and tables.
How is the "right" way to do it? (books that I have checked seemed to
dodge the issue)

There's a variety of opinions, but it's really not a big issue. Using
align="center" works most widely, but as a matter of principle, many
people and organizations frown upon using presentational attributes in
HTML and favor CSS. If you decide to use CSS for the purpose, note that
for an image, you can wrap the image in a <divelement and set
text-align: center on the wrapper, whereas for a table, you need to set
left and right margin to auto (e.g., margin: 0 auto), and this requires
Standards Mode (as opposite to Quirks Mode) and doesn't work at all on
some fairly old browsers.

I also have a doubt. html-atributes width and height are preferred
over css-properties for images and tables?

Moot point. For an image, setting the dimensions in HTML may speed up
rendering a bit, and setting them in CSS is somewhat pointless, since
the dimensions are normally in pixels and should match the actual
dimensions of the image, so they aren't really "just presentation" the
same as e.g. the width of a column is. For a table, the secret wisdom
is: don't set any widths and heights until you find out that you really
need to, and then set them as flexibly as possible, and CSS usually
gives you better chances for that (e.g., the em unit).

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2008-05-12, dorayme <do************@optusnet.com.auwrote:
[...]

You can centre an element by stating a width and auto left and right
margin for it in the css. This will do the trick in most modern
browsers, use a strict doctype like 4.01:

.element {
width: 30units;
margin: auto;
}

and

<div class="element">div</div>

or

<div class="element"><img src="..." ...></div>

or indeed, quite often,

<img class="element" ...>

With an image, the "units" in px is mostly appropriate

For <img class="element"you will also need to add display: block.
Perhaps:

img.element {
width: 30units;
margin: auto;
display: block;
}

Auto margins can only be used to centre block-level things. IMG is
inline by default.

[Ben C]

On 2008-05-12, Jukka K. Korpela <jk******@cs.tut.fiwrote:

Scripsit gaijinco:

>I'm specially having
difficulties with center alignment of elements like images and tables.
How is the "right" way to do it? (books that I have checked seemed to
dodge the issue)

There's a variety of opinions, but it's really not a big issue. Using
align="center" works most widely, but as a matter of principle, many
people and organizations frown upon using presentational attributes in
HTML and favor CSS.

align="center" is horrible. On some elements (like DIV) it means
text-align: center, on others it means centre the element itself (like
TABLE).

But worse than that it has its own bizarre "inheritance" rules (see HTML
4 11.3.2 "Inheritance of alignment specifications") that you have to get
your head around if you want anything in between "everything centered"
or "nothing centered".

Forget all that and use CSS which provides a much clearer and more
concise way to say which elements you want centered in what way.

If you decide to use CSS for the purpose, note that
for an image, you can wrap the image in a <divelement and set
text-align: center on the wrapper, whereas for a table, you need to set
left and right margin to auto (e.g., margin: 0 auto), and this requires
Standards Mode (as opposite to Quirks Mode) and doesn't work at all on
some fairly old browsers.

Or just set display: block (and margin: 0 auto) on the img, which saves
a div.

>I also have a doubt. html-atributes width and height are preferred
over css-properties for images and tables?

Moot point. For an image, setting the dimensions in HTML may speed up
rendering a bit, and setting them in CSS is somewhat pointless, since
the dimensions are normally in pixels and should match the actual
dimensions of the image, so they aren't really "just presentation" the
same as e.g. the width of a column is. For a table, the secret wisdom
is: don't set any widths and heights until you find out that you really
need to, and then set them as flexibly as possible, and CSS usually
gives you better chances for that (e.g., the em unit).

I'd say that applies to most things apart from images, and not just
tables. I would add to that: set width explicitly if you feel the need
to, but you should hardly ever be setting height explicitly.

If you set width, the contents will flow into the width you set and just
take up more height. No problem. If you set height, there's usually no
guarantee the contents will fit.

[Jukka K. Korpela]

Scripsit Ben C:

align="center" is horrible. On some elements (like DIV) it means
text-align: center, on others it means centre the element itself (like
TABLE).

For both <imgand <table>, which is what the question was about, it
does what was asked.

In CSS, you would have to use somewhat odd-looking methods. Who would
_guess_ that for centering, you set margin: 0 auto? And you would use
_different_ methods for images and tables.

But worse than that it has its own bizarre "inheritance" rules (see
HTML 4 11.3.2 "Inheritance of alignment specifications") that you
have to get your head around if you want anything in between
"everything centered" or "nothing centered".

It is confusing indeed, and it involves contradictions in the HTML spec
(<table align="..."is defined as setting the position of the table as
a whole) but it does not apply here. If you use <table align="center">,
the table gets centered. If you use <div align="center"><img ...></div>,
the image gets centered. Nothing to worry about strange HTML
"inheritance".

If you wish to center an image together with its caption, then the
situation is somewhat different. Then the simplest approach is to make
them a two-cell table, with align="center"; see
http://www.cs.tut.fi/~jkorpela/www/captions.html

Or just set display: block (and margin: 0 auto) on the img, which
saves a div.

That's possible, though if you wish to use Strict HTML, the img element
needs to be wrapped inside a block-level container (in the HTML sense)
anyway.

Oh, and even IE 7 doesn't support it in Quirks Mode. This means that
sufficiently old IE versions don't support it at all (but can handle
align="center" fine).

What's the _practical_ benefit you expect to gain from moving away from
the simple <div align="center"><img ...></divor even the simpler
<center><img ...></centerto a CSS-based approach?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2008-05-12, Jukka K. Korpela <jk******@cs.tut.fiwrote:

Scripsit Ben C:

>align="center" is horrible. On some elements (like DIV) it means
text-align: center, on others it means centre the element itself (like
TABLE).

For both <imgand <table>, which is what the question was about, it
does what was asked.

In CSS, you would have to use somewhat odd-looking methods. Who would
_guess_ that for centering, you set margin: 0 auto? And you would use
_different_ methods for images and tables.

I agree it is a bit odd especially for something that people want to do
so often.

But in the long run it's just as confusing that HTML uses "align=center"
to mean centered-block and centered-inline on different elements.

>But worse than that it has its own bizarre "inheritance" rules (see
HTML 4 11.3.2 "Inheritance of alignment specifications") that you
have to get your head around if you want anything in between
"everything centered" or "nothing centered".

It is confusing indeed, and it involves contradictions in the HTML spec
(<table align="..."is defined as setting the position of the table as
a whole) but it does not apply here. If you use <table align="center">,
the table gets centered. If you use <div align="center"><img ...></div>,
the image gets centered. Nothing to worry about strange HTML
"inheritance".

Indeed. That was my first point. The strange HTML "inheritance" was the
even worse second point.

If you wish to center an image together with its caption, then the
situation is somewhat different. Then the simplest approach is to make
them a two-cell table, with align="center"; see
http://www.cs.tut.fi/~jkorpela/www/captions.html

For the sake of completeness, you could also mention using inline-block
in that document, especially as support for it is improving.

I think inline-block is the nicest way to do image galleries with
captions on the images.

>Or just set display: block (and margin: 0 auto) on the img, which
saves a div.

That's possible, though if you wish to use Strict HTML, the img element
needs to be wrapped inside a block-level container (in the HTML sense)
anyway.

Yes, good point. (What's "semantically" inline about an image?)

Oh, and even IE 7 doesn't support it in Quirks Mode. This means that
sufficiently old IE versions don't support it at all (but can handle
align="center" fine).

So people using old IE versions won't get things centered. Tough. It's
high time they woke up and smelt the coffee anyway.

What's the _practical_ benefit you expect to gain from moving away from
the simple <div align="center"><img ...></divor even the simpler
<center><img ...></centerto a CSS-based approach?

I don't really know what you mean by "practical", but the main reasons
are these:

1. If someone's trying to learn how to do authoring, they shouldn't
waste their time learning about align=center.
2. One hopes that one day support for deprecated things will be dropped
altogether.
3. If you use align=center you have to put it on every element you want
centered or work with its strange "inheritance" rules. It's much
easier to target the elements you want with CSS selectors.

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2008-05-12, dorayme <do************@optusnet.com.auwrote:
[...]

You can centre an element by stating a width and auto left and right
margin for it in the css. This will do the trick in most modern
browsers, use a strict doctype like 4.01:

.element {
width: 30units;
margin: auto;
}

and

<div class="element">div</div>

or

<div class="element"><img src="..." ...></div>

or indeed, quite often,

<img class="element" ...>

With an image, the "units" in px is mostly appropriate

For <img class="element"you will also need to add display: block.
Perhaps:

img.element {
width: 30units;
margin: auto;
display: block;
}

Auto margins can only be used to centre block-level things. IMG is
inline by default.

Quite right... too quick and brief of me... Thanks for this...

It could be added too that if it is just an image, "text-align: center"
on the parent div will also do the trick.

--
dorayme

[Jukka K. Korpela]

Scripsit Ben C:

But in the long run it's just as confusing that HTML uses
"align=center" to mean centered-block and centered-inline on
different elements.

I concur; many HTML constructs are poorly named and overloaded with
varying meanings.

>If you wish to center an image together with its caption, then the
situation is somewhat different. Then the simplest approach is to
make them a two-cell table, with align="center"; see
http://www.cs.tut.fi/~jkorpela/www/captions.html

For the sake of completeness, you could also mention using
inline-block in that document, especially as support for it is
improving.

My problem with display: inline-block is that when it does not work, the
effects can be devastating. Suppose that you use
<span class="pic"><img ...>caption text</span>
<span class="pic"><img ...>caption text</span>
...
and do all the styling in CSS, using .pic { display: inline-block; }
among other things. When this rule is ignored, the images and their text
will run as a "line" with images as "large letters". Not nice. Using
<divinstead of <spanmakes a difference but then the rendering is
poor in a different way.

And there are many reasons why it may fail to work, even on browsers
that support it; see
http://www.cs.tut.fi/~jkorpela/css-caveats.html

My point is: Why would we let browsers render our documents very poorly
(when CSS is "off") just for the sake of out being puristic, refraining
from the use of simple markup? After all, there is no adequate markup
for an image and its caption. (All the nice HTML 3 ideas were forgotten
long ago.) Since your markup can't be adequate, logical, couldn't it at
least make the best effort in producing a basic rendering that reflects
the structure? You can then use all the world's CSS to fine-tune and
even override the basic rendering.

>That's possible, though if you wish to use Strict HTML, the img
element needs to be wrapped inside a block-level container (in the
HTML sense) anyway.

Yes, good point. (What's "semantically" inline about an image?)

The Strict HTML requirement is rather formal as such, but an image _can_
conceivably appear as an inline element. We don't need to use small
image in place of special characters any more, but there can be
legitimate reasons to include others small images inside running text,
e.g. in an instruction manual "press the start button <img
src="start.gif" alt="">".

>Oh, and even IE 7 doesn't support it in Quirks Mode. This means that
sufficiently old IE versions don't support it at all (but can handle
align="center" fine).

So people using old IE versions won't get things centered. Tough.

The question is whether you want to use a little more complicated CSS
code instead of a simple HTML attribute just to prevent old browsers
from rendering the page the way you want. :-)

>What's the _practical_ benefit you expect to gain from moving away
from the simple <div align="center"><img ...></divor even the
simpler <center><img ...></centerto a CSS-based approach?

I don't really know what you mean by "practical",

Well, something that makes the page better, regarding its purpose. Does
it do its job better if you use CSS, or do you just feel advanced?

but the main reasons are these:

1. If someone's trying to learn how to do authoring, they shouldn't
waste their time learning about align=center.

I might agree on the idea that they should primarily learn to use CSS
for formatting, but in the foreseeable future, I think they should learn
the basic HTML formatting tools, too, and then make educated choices.

But this isn't practical in the sense that CSS-based centering would
make the page any better (to visitors, search engines, or other
parties).

2. One hopes that one day support for deprecated things will be
dropped altogether.

That's hardle a practical benefit, and it's really not realistic.

3. If you use align=center you have to put it on every element you
want centered or work with its strange "inheritance" rules. It's
much easier to target the elements you want with CSS selectors.

This might mean that things are easier to the author, though there can
be a potential cost that visitors pay (if lack of centering is a
problem, and we need to assume it is _some_ kind of a problem, otherwise
we wouldn't be doing centering).

It depends on what you wish to center in which context. Sometimes you
can use a nice selector, e.g. when you want to center all tables. But if
you wish to center this image here and that table there, you would find
yourself writing class attributes and perhaps trying hard to invent
semantically oriented class names, instead of class="center", which
looks pretty silly.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Jukka K. Korpela]

Scripsit Stefan Ram:

"Jukka K. Korpela" <jk******@cs.tut.fiwrites:

>from the use of simple markup? After all, there is no adequate markup
for an image and its caption. (All the nice HTML 3 ideas were
forgotten long ago.)

The closest approximation in HTML to associate an
image (»data«) with a caption (»term«) is a DL element.

Bullshit. The caption is not a term. Check a dictionary for a definition
of "definition" and "term".

It is bullshit because such ideas have been proposed and proved wrong
many times, in this group and other discusssions.

<dl><dt>Jacob Smith</dt><dd><img src="jacob.png" /></dd><dl>

Thank you for confirming that your statement is nonsense, by your use of
grossly invalid (and not just illogical) markup in a one-liner.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2008-05-14, Jukka K. Korpela <jk******@cs.tut.fiwrote:

Scripsit Ben C:

[...]

>For the sake of completeness, you could also mention using
inline-block in that document, especially as support for it is
improving.

My problem with display: inline-block is that when it does not work, the
effects can be devastating. Suppose that you use
<span class="pic"><img ...>caption text</span>
<span class="pic"><img ...>caption text</span>
...
and do all the styling in CSS, using .pic { display: inline-block; }
among other things. When this rule is ignored, the images and their text
will run as a "line" with images as "large letters". Not nice. Using
<divinstead of <spanmakes a difference but then the rendering is
poor in a different way.

You'd have similar problems if you were using float and CSS was turned
off.

[...]

>Yes, good point. (What's "semantically" inline about an image?)

The Strict HTML requirement is rather formal as such, but an image _can_
conceivably appear as an inline element. We don't need to use small
image in place of special characters any more, but there can be
legitimate reasons to include others small images inside running text,
e.g. in an instruction manual "press the start button <img
src="start.gif" alt="">".

Yes indeed, also for little link markers of the kind they use on
Wikipedia to mark external links.

Although actually they do those with background images which is slightly
ill-advised for a different reason-- background position is undefined by
CSS 2.1 for inline boxes, and so it's unclear where browsers are
supposed to put the image, especially if the inline box breaks across
lines. It might not coincide with the padding-right area they reserve
for it.

But images are just as often more like blocks so the HTML requirement is
a bit annoying.

>>Oh, and even IE 7 doesn't support it in Quirks Mode. This means that
sufficiently old IE versions don't support it at all (but can handle
align="center" fine).

So people using old IE versions won't get things centered. Tough.

The question is whether you want to use a little more complicated CSS
code instead of a simple HTML attribute just to prevent old browsers
from rendering the page the way you want. :-)

Well I would have phrased it as whether you want to use a little more
complicated HTML fu instead of some simple CSS just to support obsolete
browsers.

[...]

This might mean that things are easier to the author, though there can
be a potential cost that visitors pay (if lack of centering is a
problem, and we need to assume it is _some_ kind of a problem, otherwise
we wouldn't be doing centering).

Interesting logic.

It depends on what you wish to center in which context. Sometimes you
can use a nice selector, e.g. when you want to center all tables. But if
you wish to center this image here and that table there, you would find
yourself writing class attributes and perhaps trying hard to invent
semantically oriented class names, instead of class="center", which
looks pretty silly.

You can just use the style attribute for a one-off.

Mixing presentational attributes and CSS is particularly gruesome
because then you've got to worry about the two different inheritance
paths.

<table align="right">
<tr>
<td style="text-align: left">
<table>
<tr>
<td style="width: 500px; border: 1px solid green">
Left or right?
</td>
</tr>
</table>
</td>
</tr>
</table>

According to HTML rules as I read them, the text "Left or right" should
be on the right of its cell. But according to the CSS 2.1
work-in-progress drafts, it should be on the left. Which is supposed to
win?

[Jukka K. Korpela]

Scripsit Ben C:

>My problem with display: inline-block is that when it does not work,
the effects can be devastating.

[...]

You'd have similar problems if you were using float and CSS was turned
off.

Yes, but not if I'm using <table align="left">.

Regarding inline-block vs. float, what's the point? Support to
inline-block is increasing but still more limited than support to float.

But images are just as often more like blocks so the HTML requirement
is a bit annoying.

Well, yes, if you just want to put an image between paragraphs. If you
aim at Strict, you need a <divwrapper, for no good reason. Then again,
if the image needs a caption (and images need captions far more often
than most authors think), you'll need some kind of a wrapper anyway.

You can just use the style attribute for a one-off.

It's often just presentational markup in disguise. Is <td style="width:
500px"really more logical, more structural, more advanced than <td
width="500">? If you use <td style="width: 25em">, then you get
something you don't get with HTML attributes, but that's just because
HTML attribute syntax is more limited.

Mixing presentational attributes and CSS is particularly gruesome
because then you've got to worry about the two different inheritance
paths.

It's surely confusing when used to affect the same properties. But
mixing, say, the HTML align="left" for making a table floated and the
CSS td { font-family: sans-serif; } is not a problem. They play on
different things.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2008-05-15, Jukka K. Korpela <jk******@cs.tut.fiwrote:

Scripsit Ben C:

>>My problem with display: inline-block is that when it does not work,
the effects can be devastating.

[...]

>You'd have similar problems if you were using float and CSS was turned
off.

Yes, but not if I'm using <table align="left">.

Regarding inline-block vs. float, what's the point? Support to
inline-block is increasing but still more limited than support to float.

With inline block the images in an image gallery can be different sizes
without them "snagging" on each other as they try to float to the left.

You can also put text-align: center on the container so they break up
into centered rows, which is an effect I'm sure some people have asked
for in these NGs in the past.

The other nice thing about it is that the behaviour of replaced inline
is very similar to that of inline-block so that the images-with-captions
flow just like inline images do without captions. This makes it a good
way to retro-fit captions.

[Jukka K. Korpela]

Scripsit Ben C:

On 2008-05-15, Jukka K. Korpela <jk******@cs.tut.fiwrote:

>Scripsit Ben C:

>>>My problem with display: inline-block is that when it does not
work, the effects can be devastating.

[...]

>>You'd have similar problems if you were using float and CSS was
turned off.

Having studied this a bit more, I think there's also the problem that
when you use <divfor the image/caption combinations that you then turn
to inline blocks in CSS, IE incorrectly defaults the width to 100% of
the available width. We can fix this by explicitly setting the width to
the image width, or that width plus some padding etc., but it's somewhat
less flexible then.

And when I use <span>, the non-CSS rendering is just awful, unless I use
<br>, doing something like
<span class="pic"><img ...><br>
<span class="caption">caption text<br></span></span>
which is possible but a little clumsy.

>Regarding inline-block vs. float, what's the point? Support to
inline-block is increasing but still more limited than support to
float.

With inline block the images in an image gallery can be different
sizes without them "snagging" on each other as they try to float to
the left.

I guess you're right, and we could use vertical-align to tune the
presentation in such cases.

You can also put text-align: center on the container so they break up
into centered rows, which is an effect I'm sure some people have asked
for in these NGs in the past.

Point taken.

The other nice thing about it is that the behaviour of replaced inline
is very similar to that of inline-block so that the
images-with-captions flow just like inline images do without
captions. This makes it a good way to retro-fit captions.

Well, I don't think inline images are that common.

But the main problem is that browser support is poor. IE supports
display: inline-block since IE 5.5 but with flaws, such the one I
mentioned. Firefox 2 does not seem to support it all, and I think this
is strong enough reason to refrain from using it on www pages. Using
<bra tolerable (?) fallback is possible, but the other methods work
fine - though with some of the nice features of inline blocks - on
practically all graphic browsers.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2008-05-19, Jukka K. Korpela <jk******@cs.tut.fiwrote:
[...]

But the main problem is that browser support is poor. IE supports
display: inline-block since IE 5.5 but with flaws, such the one I
mentioned. Firefox 2 does not seem to support it all, and I think this
is strong enough reason to refrain from using it on www pages. Using
<bra tolerable (?) fallback is possible, but the other methods work
fine - though with some of the nice features of inline blocks - on
practically all graphic browsers.

I agree it's not practical to use it on the www yet. But it may be soon:
Firefox 3 I think supports it properly and I have heard rumours that
generally IE8 is a big step forwards from IE7 (let's hope they are
true).

I usually tell people how to do things with inline-block first and then
break the news to them that it isn't practical and they have to use
floats instead. The idea is to get them to aspire to a better world.

--
As for the future, your task is not to foresee it, but to enable it --
Antoine de Saint-Exupéry