CSS img class doesn't work

Hi,

I want to align an image and I have the following code but it doesn’t work.

Page:

<img class="aligncenter" src="image.jpg" />

CSS File:

.aligncenter {text-align:center}

Am I missing something?

Hi

The aligncenter class would need to be on the parent of the image for text-align:center to work (and as long as the image is an inline element still).
If you want to address the image itself then set it to display:block and use auto:margins to center it.

aligncenter is not a very good classname because if you decide at a later dat you want the image left aligned you woll end up having to change the html and the css otherwise the class will be confusing.

Use something more appropriate depnding on the situation.

e.g.
img.caption{display:block;margin:auto}

Hi Paul,

Thank you very much. Now it works fine. I used .aligncenter because I saw it on WordPress and for this type of image on my site, the alignment will never change.

By the way, is there a list of forbidden names to use as id or class in CSS? For example, for one case I used .center as a class name, is it a bad idea?

It’s always a bad idea to use class names that are presentational by nature. Presentational elements were deprecated form html (in strict doctypes) and you should lkeep the same rationale for yopur class and id names.

For example instead of saying class=“red” you may prefer to say class=“warning”. Or instead of saying class=“gold” you may prefer class=“highlight”. Use words that describe the function but not the presentation.

That means that if you decide later that you want to change the color or look of the class then you can do so without conflict.

Clients always change their mind so you don’t want to have a class that says .center when you have changed the text to align right.
There are no forbidden names but there are rules as to what characters are allowed and you can’t start ids and classnames with digits and other some other characters.

Paul, thanks for clarifying this, I will keep that in mind from now on. I know about the rules but wanted to make sure whether or not there were words that cannot be used.

CSS is NOT a programming language, as such it does not have “commands”, "or “functions” or even “pre defined variables” (or variables of any kind really). Once you put a “.” ( for class) or a “#” and no spaces before any word… it becomes a class or ID; the name space is pretty much up to you, as long as you stick to the characters in Paul’s link you are OK. remeber just because you CAN do something doesnt mean you SHOULD. “div.div” or “.h1 h1” are perfectly legal, but its bound to mess with your eyes and your mind when debugging.

It is GOOD practice to make those names meaningful. YOU could name something “.leftRed”… but it could come back to bite you months later when you are trying to alter your code and wonder WHY something is “leftRed”… but if you can explain why… then by all means.

You have to keep in mind, since it seems you are working with prefabricated code that using names that have been used in the original Style Sheet will interfere and CAN override the previous code. Some times this si what you ant , especially if you know your way around CSS AND that specific Stylke template. If you don’t it can be disastrous time consuming to debug.