Centering an Image using CSS.

DefiantAsh · 7 May 2011 at 09:18

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;

Code:

#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.

Major_Disaster · 7 May 2011 at 10:05

Give the image a class / id:

Code:

#wrapper #bodArea #left img.center {
}

or just try

Code:

#wrapper #bodArea #left img {
}

DefiantAsh · 7 May 2011 at 10:16

Major_Disaster said:
Give the image a class / id:

Code:

#wrapper #bodArea #left img.center { }

or just try

Code:

#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.

Shicky · 7 May 2011 at 11:01

When you gave the image a class did you also give it styling? The advice was correct, give the image a class, and set margin:0 auto; think you need to give it a set width too.

I asked a very similar question not long ago, use the search function to see it

sist_si · 7 May 2011 at 11:43

can't you just say

#wrapper #bodArea #left img {
margin:0 auto;
}

that'll work for all images within "#left"
if you only want the 1st one, just say #wrapper #bodArea #left > img { margin:0 auto; }

DefiantAsh · 7 May 2011 at 12:26

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.

Code:

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;

Code:

#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