Member Avatar for Member #360561

The above HTML code is sometimes ignored by FireFox, but worse: It's not even allowed in XHTML1.0 Strict.

I have updated my sites to be "Strict" compatible, except for this little thing which is important enough. The problem is that I have found nothing to replace it.

In this example:

<a href="http://greatday.com/motivate/index.html">

<img style="width:18em;"

src="http://greatday.com/motivate/dmsum.gif" alt="Daily Motivator" title="Daily Motivator" /></a>

the image should be centered, but even if I enclose it by a div with text-align:center,
FireFox places the image to the far left. This happens with many other objects as well, especially if they are defined as block elements.

Surely it shouldn't be like this?
Or rather, how can we continue having centered objects while confirming to the newer standards?

I could write a table-like construct using divs and css, but that would be extremely clumsy for a little thing like this. I'm looking for a simple solution, where HTML defines the content and css the style! :)

  • 5 Contributors
  • 5 Replies
  • 185 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by wickedsunny

Dani AI

Generated

Brief summary: the old HTML attribute align="center" is deprecated in XHTML 1.0 Strict, and different browsers will behave inconsistently if the element you want to centre is block-level or affected by floats/resets. The underlying rule is simple: inline-level elements are centred by the inline flow of their container, while block-level elements are positioned by box-model rules, so you need a box-model centering method for them.

Modern, simple and standards-compliant fixes (don’t use tables or deprecated attributes)

  • Use a layout container that centres its children (flexbox or grid). These work reliably across current browsers and keep HTML semantic.

    <div class="wrap">
  <a href="#"><img src="dmsum.gif" alt="Daily Motivator"></a>
</div>

<style>
.wrap {
  display: flex;
  justify-content: center;
  align-items: center; /* optional vertical centering */
}
.wrap img {
  max-width: 100%;
  height: auto;
}
</style>

  • Or use CSS Grid for a one-line centering approach:

    .figure-center { display: grid; place-items: center; }
.figure-center img { max-width: 100%; height: auto; }

Troubleshooting checklist (why Firefox might still place it left)

  • Inspect the element in Firefox Developer Tools: check computed display, float, and width. A floated element or one set to fill its container will appear left-aligned.
  • Watch for CSS resets or frameworks that turn images into block-level or 100% width by default.
  • If you must support very old browsers, keep a fallback: make the container an inline-centering context and keep the image inline-ish; otherwise prefer the modern methods above.

Notes on earlier replies: and were right to highlight the block vs inline distinction; ’s combined approach can help in mixed-compatibility situations; and ’ point about using Transitional is pragmatic, but using CSS centering keeps your markup strict and future-proof.

Recommended Answers

All 5 Replies

Member Avatar for FlashCreations

Here is an interesting statistic:
Yahoo has hundreds of HTML/CSS errors that don't comply with standards.
No website is absolutely prefect when it comes to standards. (Not like I'm volunteering to check!!!). I would suggest simply using a less-strict standard. I usually code in XHTML 1.0 Transitional.

Member Avatar for MattEvans

To center a block-type object, within another block type object, use this code on the object that you want to be centered ( i.e. on the inner object ):

style="margin-left:auto;margin-right:auto;"

although, tbh, text-align:center; really should work, since an image isn't supposed to be a block-type object.

anyway, for best compatibility, use text-align:center; on the outer object, and margin-left:auto;margin-right:auto; on the image.

Member Avatar for Member #360561

To center a block-type object, within another block type object, use this code on the object that you want to be centered ( i.e. on the inner object ):

style="margin-left:auto;margin-right:auto;"

although, tbh, text-align:center; really should work, since an image isn't supposed to be a block-type object.

anyway, for best compatibility, use text-align:center; on the outer object, and margin-left:auto;margin-right:auto; on the image.

Thanks! I'll try that! text-align:center doesn't work alone, so probably this was what I needed. I often define images as block because it separates from text with a newline without haveing to use <br /> for instance.

Thank you very much!

Member Avatar for cpeeyush1

always use
margin-left:auto;
margin-right:auto;

because if u use this code rather then your one then if in any case if browser screen size is change due to any reason then the left and right margin are auto set for equal value according to the size of screen and this one is a better idea or one of the best

and one importent thing is that you should use external css rather then this internal one

-PC(INDIA)

Member Avatar for wickedsunny

ok let me make it easier to u in all browsers. jsut use this style in the div .

style="margin:0 auto; text-align:center;"

this margin 0 auto is for firefox and flock, while the text align will work in browsers like ie opera etc :) cheers

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.