Correctly "centering" An Image In Html

[mattzx11]

I have been doing a lot of reading about the correct & current acceptable ways to center an image using html. I was wondering if someone here could clear this up to me. I have read that the <center> tag is deprecated and to use styles. I'm just confused on what really is the correct way to write the code. If anyone could shed some light on this I would really appreciate it.Regards,Matthew

[jeffman]

Yup. Using the <center> tag will get you sent to the principal's office.Let's say your HTML looks like this:

<div class="holder">   <img src="x.jpg" class="centered"></div.

Add some CSS like this:

div.holder {   text-align: center;}img.centered {   margin: 0 auto;}

In a perfect world, you would only need the second definition. But older browsers don't understand it. That's why we need to add the first.The second one is written in shorthand. It means the top and bottom margins should be set to 0, and the left and right should both be set to auto. That's the part that does the centering.

[Ingolme]

For the <img> element text-align: center alone in the parent element would work because <img> is an inline element (with a little different behaviour than normal ones, due to having a preset width and height).margin: auto; is used to center block-level elements like <div> or <table>.

[mattzx11]

Yup. Using the <center> tag will get you sent to the principal's office.Let's say your HTML looks like this:

<div class="holder">   <img src="x.jpg" class="centered"></div.

Add some CSS like this:

div.holder {   text-align: center;}img.centered {   margin: 0 auto;}

In a perfect world, you would only need the second definition. But older browsers don't understand it. That's why we need to add the first.The second one is written in shorthand. It means the top and bottom margins should be set to 0, and the left and right should both be set to auto. That's the part that does the centering.

So am I correct in thinking that in order to change the color of a word in the middle of a sentence I would use the code:

<span font color:#ff0000">red</span>

[Ingolme]

So am I correct in thinking that in order to change the color of a word in the middle of a sentence I would use the code:

<span font color:#ff0000">red</span>

No, you could either write:

<span style="color:#FF0000;">red</span>

or

<span class="R">red</span>

and put this in your stylesheet

.R {color: red;}

[mattzx11]

No, you could either write:

<span style="color:#FF0000;">red</span>

or

<span class="R">red</span>

and put this in your stylesheet

.R {color: red;}

Awesome, Thanks for the reply. One last question. I think I understand that all "tags" should be lower case, but when entering colors i.e. #ff0000, are these suppsoed to be capital letters?

[Ingolme]

In XHTML, the tags have to be in lowercase. In HTML, it doesn't matter. In CSS, the color codes can be both lower and uppercase.(X)HTML attribute values can be both lower and uppercase, like in the following examples:

<div id="thisDiv"></div><span class="SpAnStYlE"></span>

[Jerry62704]

Awesome, Thanks for the reply. One last question. I think I understand that all "tags" should be lower case, but when entering colors i.e. #ff0000, are these suppsoed to be capital letters?

Use lower case.

[Synook]

Awesome, Thanks for the reply. One last question. I think I understand that all "tags" should be lower case, but when entering colors i.e. #ff0000, are these suppsoed to be capital letters?

To almost all CSS interpreters it doesn't matter, and in fact there is no convention, generally, on whether to write the hexadecimal digits representing 10 - 15 in uppercase or lowercase.

[Flame1622]

nvm