Click here to get back home

Center-Aligning elements
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Center-Aligning elements gaijinco 05-12-2008
Posted by gaijinco on May 12, 2008, 12:41 am
Please log in for more thread options
 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.

Posted by dorayme on May 12, 2008, 12:59 am
Please log in for more thread options
 In article

> 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

Posted by Ben C on May 12, 2008, 3:36 am
Please log in for more thread options
[...]
> 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.

Posted by dorayme on May 12, 2008, 5:52 pm
Please log in for more thread options

> [...]
> > 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

Posted by Jukka K. Korpela on May 12, 2008, 2:30 am
Please log in for more thread options
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 <div> element 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/


Similar ThreadsPosted
CSS for All Elements (Bullets February 22, 2005, 12:17 pm
CSS gap between inline elements February 7, 2008, 3:03 am
Form and nested elements November 10, 2004, 11:57 am
Visibility of form elements December 3, 2004, 8:01 pm
Presentational and Structural Elements September 22, 2005, 10:56 am
form elements which should not be submitted March 9, 2006, 3:17 pm
custom tags and elements December 5, 2006, 4:57 am
Don't print certain elements from a page February 17, 2007, 3:38 pm
Extending HTML Elements April 19, 2007, 8:46 am
How to push elements to the bottom August 21, 2007, 6:07 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap