Member Avatar for ingeva

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
  • 168 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by wickedsunny
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 ingeva

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.