473,840 Members | 1,607 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Center-Aligning elements

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.
Jun 27 '08 #1
14 2439
In article
<95************ *************** *******@25g2000 hsx.googlegroup s.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
Jun 27 '08 #2
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/

Jun 27 '08 #3
On 2008-05-12, dorayme <do************ @optusnet.com.a uwrote:
[...]
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.
Jun 27 '08 #4
On 2008-05-12, Jukka K. Korpela <jk******@cs.tu t.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 "inheritanc e" rules (see HTML
4 11.3.2 "Inheritanc e 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.
Jun 27 '08 #5
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 "inheritanc e" rules (see
HTML 4 11.3.2 "Inheritanc e 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
"inheritanc e".

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/

Jun 27 '08 #6
On 2008-05-12, Jukka K. Korpela <jk******@cs.tu t.fiwrote:
Scripsit Ben C:
>align="cente r" 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=cent er"
to mean centered-block and centered-inline on different elements.
>But worse than that it has its own bizarre "inheritanc e" rules (see
HTML 4 11.3.2 "Inheritanc e 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
"inheritanc e".
Indeed. That was my first point. The strange HTML "inheritanc e" 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 "semantical ly" 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 "inheritanc e" rules. It's much
easier to target the elements you want with CSS selectors.
Jun 27 '08 #7
In article <sl************ *********@bowse r.marioworld>,
Ben C <sp******@spam. eggswrote:
On 2008-05-12, dorayme <do************ @optusnet.com.a uwrote:
[...]
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
Jun 27 '08 #8
Scripsit Ben C:
But in the long run it's just as confusing that HTML uses
"align=cent er" 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"><im g ...>caption text</span>
<span class="pic"><im g ...>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 "semantical ly" 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="cente r" 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 "inheritanc e" 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/

Jun 27 '08 #9
Scripsit Stefan Ram:
"Jukka K. Korpela" <jk******@cs.tu t.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/

Jun 27 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
9508
by: Ahmed Jewahar | last post by:
Hi All, I'm new to this forum as well as new to ASP.NET. My backgorund is ASP. But, I'm just doing my .NET course with MS Certified training center currently. I have couple of questions (it may be silly for you !) and really appreciate if you could share your expertise with me. QUESTION - 1
7
3250
by: Alex | last post by:
Hi Everone, I need some advice on how to setup 4 columns where the outside two are absolute (120px) and the inner two (side by side) are relevent (Fluid) and change with the screen. Here's my rough layout:
3
2053
by: Mike | last post by:
Another complaint I would like to see corrected. The Information Center tool is now pretty much useless to me. Does anyone else besides me remember when information center had a troubleshooting tab that had all of the messages that may appear as well as SQL error messages. The Tasks tab also used to have many more useful catergories. Please stop changing things that are not broke. Besides Information center, I do not like the look and...
2
7917
by: Claude Shea | last post by:
Is DB2 Development Center an addon product that I have to download or purchase separately? I can't seem to find it in any of my downloads or on any of my CDs. Is it available for all versions of DB2? I currently have two versions of DB2. My production environment is DB2 UDB WSUE V8.1 on a Redhat Linux 7.2 . Currently in the process of creating a new production environment which is DB2 UDB Workgroups V8.2 which is installed on Suse 9...
1
1813
by: Henry Reardon | last post by:
I have been having problems with the Development Center for several days now. It seemed to be working fine when I initially installed DB2 (LUW) Version 8 (FP7) and upgraded to FP8, except that I kept getting SQL1131 whenever I tried to prepared a stored procedure. As a result, I completely deleted DB2 and reinstalled version 8 and upgraded to FP8. At that point, I experimented a bit with some of the Environment Settings, particularly the...
4
6290
by: Joey | last post by:
Does anyone know how to center this sample webpage in Firefox? If so, will you provide the example as it applies to this sample webpage? I have read numerous posts and articles on how to center content with CSS...none are working for me. The best I can do at this point is the "text-align: center" for my div tag, but that only works in IE. I want to be able to center all the content within the div (effectively center the site content) for...
5
2643
Gregos
by: Gregos | last post by:
Remember I'm new at this... My webpage: http://www.geocities.com/gregos_39/gregos/gregpage.html My code: <html> <head> <title>Gregos Apple/Mac Help Page</title> <link href="home_style.css" rel="stylesheet" type="text/css"> <link href="applications_style.css" rel="stylesheet" type="text/css"> <link href="utilities_style.css" rel="stylesheet" type="text/css">
11
4025
by: Mel | last post by:
Does anyone know a way to center the info. on a webpage? I want my web site to work like MySpace.com where the page content remains centered when I resize the browser window. For the life of me I can't figure out how to do it. I am desperate to figure it out today! Please help! FYI: I am referencing one master page file in all of my web pages. The content of my pages are stored in one or more panel controls. - Melissa
24
3637
by: GloStix | last post by:
I'm trying to center this banner, it's in a div that has the same width so it's not exactly "centering" but it's screwed up, It works in safari but in Firefox it's messed up. I uploaded a Video to show what I'm talking about. http://screencast.com/t/i5SLg3cAczH (*WARNING, TAKES A WHILE TO LOAD*) *HTML* <html> <head> <title>James Mann - Portfolio</title>
2
16372
by: yangtono | last post by:
Hi, I am creating a table to list some data. The table is using a sorting and highlight function that I found from the net. I can't attach image here, basically html will wrap the heading, therefore I notice the second line of the header is left align instead of centering. I believe it's because of the sort.htc script that will output an arrow when user click on the header to sort. The code is as below: <TABLE width="100%">
0
10922
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10603
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10660
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10301
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
5685
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5874
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4498
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4076
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3138
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.