Don't understand text-align

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Robert Nicholson - 28 Dec 2003 01:26 GMT

So I've got one page where I have an image inside a DIV with
text-align: center and the
image is correctly centered in that block. Making me think that
text-align will center the contents of a block.

Another page I have a series of thumbnails which are themselves a DIV
block wrapping both an image and a caption (float: left) inside a DIV
block with a fixed width which is smaller than the width of the
browser and that DIV block is in another DIV block that is the full
width of the browser.

What I don't understand is why text-align doesn't center the the first
DIV block inside the second.

I know I could bring these in via a left margin but I want everything
to be correctly centered based on the width of the browser.

Reply to this Message

Stan Brown - 28 Dec 2003 01:58 GMT

>Another page I have a series of thumbnails which are themselves a DIV
>block wrapping both an image and a caption (float: left) inside a DIV
>block with a fixed width which is smaller than the width of the
>browser and that DIV block is in another DIV block that is the full
>width of the browser.

I don't follow the above. Surely there is an easier way to do what
you're trying to do?

>What I don't understand is why text-align doesn't center the the first
>DIV block inside the second.

Anyway, a DIV by default is the full content width of its parent,
minus margin, borders, and padding of the inner DIV. An IMG, by
contrast, has an intrinsic width. That's probably at the root of
your problem, though as I say I don't understand your layout. (Hint:
post a URL with any query. A direct view is worth a thousand words
of description.)

Signature

Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

Reply to this Message

Robert Nicholson - 29 Dec 2003 02:14 GMT

I have what I wanted working however should you want to take a look
and critique it
feel free.

http://www.elastica.com/cgi-bin/showAlbum2.cgi?albumName=weddingbell

One thing that I felt might be useful in the future was to be able to
wrap an image in a div
and manipulate the div. In doing this just exactly how can you set the
width of the div to
be that of the image plus a bit? I haven't seen anyways to dynamically
control the width
of div.

> >Another page I have a series of thumbnails which are themselves a DIV
> >block wrapping both an image and a caption (float: left) inside a DIV
[quoted text clipped - 14 lines]
> post a URL with any query. A direct view is worth a thousand words
> of description.)

Reply to this Message

Stan Brown - 29 Dec 2003 03:53 GMT

>I have what I wanted working however should you want to take a look
>and critique it

makes it harder to follow discussions.
before the material you're commenting on, it
When you put your comments

http://oakroadsystems.com/genl/unice.htm#upside

Signature

Reply to this Message

Robert Nicholson - 29 Dec 2003 05:55 GMT

> Stan Brown <the_stan_brown@fastmail.fm> wrote in message news:
>(Hint:post a URL with any query. A direct view is worth a thousand

words

>of description.)

I have what I wanted working however should you want to take a look
and critique it feel free.

http://www.elastica.com/cgi-bin/showAlbum2.cgi?albumName=weddingbell

One thing that I felt might be useful in the future was to be able to
wrap an image in a div and manipulate the div. In doing this just
exactly how can you set the width of the div to be that of the image
plus a bit? I haven't seen anyway to dynamically control the width of
div.

Reply to this Message

Brian - 30 Dec 2003 06:43 GMT

> One thing that I felt might be useful in the future was to be able to
> wrap an image in a div and manipulate the div. In doing this just
> exactly how can you set the width of the div to be that of the image
> plus a bit?

display: table-cell combined with padding will do the trick, but
afaik, only Opera does display: table-cell. More browsers (Mozilla,
possibly IE6/Win) will shrink a div if that div is floated and its
required width is less than the browser window.

> I haven't seen anyway to dynamically control the width of div.

Bearing in mind the KISS principle, a database and server side
scripting language could suggest a width for certain elements.

Signature

Brian
follow the directions in my address to email me

Reply to this Message

Eric Bohlman - 28 Dec 2003 04:32 GMT

> So I've got one page where I have an image inside a DIV with
> text-align: center and the
> image is correctly centered in that block. Making me think that
> text-align will center the contents of a block.

As its name implies, it will center the *text* within the block. Due to a
decision or two back in the early 1990s that seemed like a good idea at the
time but in retrospect seems to call to mind Douglas Adams' assertion about
the problem with ideas that sound good at parties being that such ideas
sound good *only* at parties, images are considered text for such purposes
(in HTML terms, an image is just a funny-looking character).

> Another page I have a series of thumbnails which are themselves a DIV
> block wrapping both an image and a caption (float: left) inside a DIV
[quoted text clipped - 4 lines]
> What I don't understand is why text-align doesn't center the the first
> DIV block inside the second.

Because a DIV block isn't a text element, it's a block. Blocks themselves
are, in conforming implementations, unaffected by the text-align property
(as you might guess, MSIE/Win prior to version 6 got this wrong, and IE6
will still do it if it's in quirks mode). To center a block, you really
do need to give it a width and then set its horizontal margins to auto.
The need to specify a width seems restrictive, but it's hard to imagine a
way to implement the margin calculations otherwise (since without an
explicit width, how do you determine how wide a block is? You can only do
it in a few special cases, like when there's a single line of text).

Reply to this Message

Robert Nicholson - 29 Dec 2003 02:12 GMT

i have what I wanted working now and I understand the block vs incline
issues with text-align and margin: auto

However, during this I wasn't interested in whether or not there was a
way to wrap an image in a div and _correctly_ set the width of the div
to that of the image. Is there any way to do this? Supposing you
wanted to manipulate the something by putting it in a block it would
be nice to dynamically set the width of that block based on it's
contents.

> > So I've got one page where I have an image inside a DIV with
> > text-align: center and the
[quoted text clipped - 26 lines]
> explicit width, how do you determine how wide a block is? You can only do
> it in a few special cases, like when there's a single line of text).

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2003

Don't understand text-align