[Web4lib] HTML question

[Thomas Dowling]

You're working too hard at this.  CSS does not require you to count
pixels, and you only have to figure out margin stuff if you're trying to
locate one block element within another, not if you're trying to align
the contents of a block element.

There's more than one way to do this, but here's a simple solution.

Problem #1 here is that <img> is an inline element, and there are a
number of CSS properties that only apply to block elements, including
horizontal alignment.  So you need to stick the image inside a block
element--<p> or <div>, for example.  Once you've done that, center the
inline contents of the block element (somewhat misleadingly for your
purposes, the directive is called "text-align"):

  <p style="text-align: center;">
  <img
    alt="Summer Reading Registration starts 5 June!"
    title="Summer Reading Registration starts 5 June!"
    src="dogcolor3.jpg"
    height="130" width="150">
  </p>

<http://www.w3.org/TR/html4/struct/global.html#h-7.5.3> for quick
definitions of block and inline elements.

Thomas Dowling
tdowling at ohiolink.edu


On 4/19/2006 11:46 AM, Lynne Puckett wrote:


> Check out http://www.billings.lib.mt.us/kids.html
> The dog-image is supposed to be centered. I used style margins, but that
> only works if a) I get the number of pixels correct and b) everybody who
> looks at it has the same screen resolution I do. If I put the image in a
> separate div, that messes up the text flow. The div it's already in has
> to float left to fit the layout. I have been suffering from this
> delusion that CSS was supposed to make layout easier, so why is a simple
> image-centering so difficult?
> I do appreciate your suggestion, but it's just like the old days of
> centering a paragraph in order to center a table or image inside the
> paragraph, and I thought that was supposed to go away.
> 
> Lynne