Member Avatar for alienlinux

it's time to clean up my code and get a w3c validation.
in the original page i had

<div align="center"><IMG src="http://<mysite>/images/<image>" width="640" height="78"></div>

but w3c says 'there is no attribute "ALIGN"'
it mentions that i can get around this in the css.
i have been through a css reference and found nothing to center it.
how do i do this in my stylesheet?

  • 2 Contributors
  • 2 Replies
  • 120 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by roryt

Dani AI

Generated

As discovered, the HTML align attribute is a presentational relic — use CSS instead. 's idea to use auto margins also points to the right family of solutions. Below are compact, modern options and the reasons to pick each, plus quick troubleshooting tips.

Use the parent when the image stays inline:

.center-text {
  text-align: center;
}

Apply that class to the image's container. This centers inline-level children (text and inline images) without changing the image's display type.

Make the image itself a centered block (good for responsive images):

.logo {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

This centers the image element itself, scales it to fit its container, and keeps aspect ratio.

Use Flexbox for horizontal + vertical centering inside a container:

.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox is handy when you need both axes centered or when the container should control layout.

Troubleshooting and notes:

  • Inline text-align vs block margin: auto: text-align centers inline content; margin: auto centers block-level elements. Images are inline by default, so choose the method accordingly.
  • Floats, absolute positioning, or CSS rules elsewhere can stop centering — check computed styles in dev tools.
  • Prefer CSS classes in an external stylesheet (better for validation and maintenance) and include alt on images for accessibility.
  • For modern guidance and edge cases see MDN’s centering guide and the Flexbox tutorial.

References: and Flexbox basics.

Member Avatar for alienlinux

<div style="text-align:center">
this validates ok :)

Member Avatar for roryt

I think you need to put a space before the image if you wish to do this. another way of doing it is :

<div style="width: 640px; height: 78px; margin-left: auto; margin-right: auto;"><img src="http://<mysite>/images/<image>"/></div>

hope that helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.