Centering an Image using CSS.

[DefiantAsh]

I am developing a website for myself, and as part of my University project, however we were told to only use XHTML 1.1, which is ok, however you cannot style your page within the HTML code, all has to be done within CSS.

The predicament i have is that i have both an image, and a few lines of text within one single div. I want the text to stay normal, default alignment, however change the alignment of my Image to be in the centre of the div?

CSS for Div;

#wrapper #bodyArea #left {
	width: 70%;
	float: left;
	clear: both;
	padding: 10px;
	color: #fff;
	font-weight: bold;
}

Hopefully somebody may know or have an idea to try, im resorting to making a separate div within that div for an image class, allowing me to centre the image without affecting the text.

I will see if it works.

Ty for any replies in the mean time.

 

[DefiantAsh]

Give the image a class / id:

#wrapper #bodArea #left img.center {
}

or just try

#wrapper #bodArea #left img {
}

Ok dokes cheers, i will have a looksee now

Ok, so i tried it, and it didnt work, however i feel i need to do something with the HTML code but im unsure aobut adding an image class within the <img> tags etc.

 

[DefiantAsh]

Fixed it.

Here are the CSS codes which i used.

This, as you know, is the Paragraph CSS, well it is on mine. I used this to target only text within a <p> tab, allowing me to justify the text, without affecting any of the images within the same div.

p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin: 20px;
	text-align: left;
}

And then to have the image centered, i simply had this;

#wrapper #bodyArea #left {
	width: 740px;
	float: left;
	clear: both;
	padding: 5px;
	color: #fff;
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
	text-align: center;
}

text-align: center; allows me to manipulate the alignment within the div, thus changing all of the contents, however as the textual content was within <p> tags, the alignment for text in the /p CSS is "dominant" in a way, making it more important, allowing the changing of text from it.

Hope you understand, i waffle on a lot