center an image

[monique]

Hi all,

I have a problem on a website I built voor Wensstichting Shamajo (a wish foundation for disabled).

I would like to center images in text fields. Before I used div's, which meanwhile I found out was not the correct way. Now I try to stick to classes for images, but no matter how hard I try, it won't work

Please see the following (testing) page on the site: http://www.shamajo.nl/homejaarverslag.htm.

The picture under the text "Jaarverslag 2005" needs to be centered.

The HTML-code I used:

<p><img src="afbeeldingen/jaarverslag2005/foto001.jpg" class="centeroutset" alt="jaarverslag 2005 foto 1" /></p>

The CSS-codes I used for images:

img {
	border-style:none;
}

img.solid {
	border:1px solid #a91bb0;
}

img.center {
	text-align:center;
}

img.outset {
	border-style:outset;
}

img.centeroutset {
	text-align: center;
	border-style: outset;
}

Can someone help me and tell me what I've done wrong and what I can do to "get what I want"?

Thanks a lot
Monique

[boogyman]

I have a problem on a website I built voor Wensstichting Shamajo (a wish foundation for disabled).

thats very noble of you.

The CSS-codes I used for images:

img {
	border-style:none;
}

img.solid {
	border:1px solid #a91bb0;
}

img.center {
	text-align:center;
}

img.outset {
	border-style:outset;
}

img.centeroutset {
	text-align: center;
	border-style: outset;
}

the only one that relates to your html is the last one. the others are defining a class that doesnt belong to the image code you posted. to center you need to use margins on either side, try this

p img.centeroutset {
     margin: 0 auto;
     text-align: center;
}

if that doesnt work then

p img.centeroutset {
     margin: 0 auto;
     width: 100px /* width of image */
     text-align:center;
}

the first should work however I have sometimes experienced where the image width needs to be defined for the margins to take affect *cough cough* IE *coughcough*

[monique]

Thanks for your help Boogyman. Unfortunately neither of your options work.

Is there another solution?

By the way: does the p (for paragraph I assume) have to be in front of the img.centeroutset?

[jc_gmk]

you could try putting a container round the image:

<div class="container">
	<img src="afbeeldingen/jaarverslag2005/foto001.jpg" alt="jaarverslag 2005 foto 1" />
</div>

.container {
	width:100%;
	text-align:center;
}
.container img {
	border-style:none;
}

[boogyman]

By the way: does the p (for paragraph I assume) have to be in front of the img.centeroutset?

yes the p for paragraph does need to be before the img.centeroutset, because that is the way it is in the code.

Please post the website / site url so we can better help you troubleshoot

[monique]

JC_GMK,

I cannot use a div here, because I need to use it several times in the same page and you are not allowed to use the same div more than once every page.

Boogyman,

Ok, I have added the p in the css-codes, but for the problem itself it doesn't help (as I already tried).

[jc_gmk]

I cannot use a div here, because I need to use it several times in the same page and you are not allowed to use the same div more than once every page.

You can use a div with the same class multiple times.

You could do this:

<div class="container">
	<img src="afbeeldingen/jaarverslag2005/foto001.jpg" alt="jaarverslag 2005 foto 1" />
</div>
<div class="container">
	<img src="afbeeldingen/jaarverslag2005/foto002.jpg" alt="jaarverslag 2005 foto 2" />
</div>

.container {
	float:left;
	width:100%;
	text-align:center;
}
.container img {
	border-style:none;
}

Or this if you want to position them individually:

<div class="container1">
	<img src="afbeeldingen/jaarverslag2005/foto001.jpg" alt="jaarverslag 2005 foto 1" />
</div>
<div class="container2">
	<img src="afbeeldingen/jaarverslag2005/foto001.jpg" alt="jaarverslag 2005 foto 1" />

.container1, .container2 {
	position:absolute;
	width:100%;
	text-align:center;
}
.container1 {
	top:10px;
	left:10px;
}
.container2 {
	top:200px;
	left:10px;
}
div img {
	border-style:none;
}

[monique]

Ok, the reason I want to avoid to use the same div several times in a page is because I want to build accessible websites (disabled!). One test to know whether the website is valid is via W3C (see: http://validator.w3.org/. Another option is to follow the Guidelines for the accessibility and sustainability of (Dutch) government websites (see: http://webrichtlijnen.overheid.nl/english/). They will not allow to use the same div more than once on a page.

So far my explanation on "why"...

I understand that by giving each div another name you can overcome that problem. However, sometimes I have 2 or 3 pictures somewhere in the text that need to be centered, sometimes 10 or more. Isn't it a bit "overdone" to give them all another name?

Isn't there a more easy way to overcome this problem?

[jscheuer1]

You can use 'the same' division as many times on a page as you like. You cannot use the same id for that division. Since the method used for selecting divisions in the above advice is via class designation, that isn't a problem.

The standard way to center an image on a page under a valid URL DOCTYPE of HTML 4.01 (I'm not even sure if the other methods given here work or not) would be:

.c_img {
margin:0 auto;
}
#img_1 {
width:175px;
height:100px;
}
#img_2 {
width:275px;
height:150px;
}

Then an image you want centered:

<img id="img_1" class="c_img" src="some.jpg">

Then another:

<img id="img_2" class="c_img" src="some_other.jpg">

BTW, I looked at your example page, it looks fine and validates.

[monique]

Good "old" John! Hello. I see meanwhile you've got 6 pic's behind your name. Believe that's an "upgrade". Congratulations.

I tried what you proposed, but it didn't work either.

Than - in a reflex - and I got an idea and centered the paragraph as follows:

In the CSS:

p.center {
	text-align:center;
}

And in the XHTML:

<p class="center"><img src="afbeeldingen/jaarverslag2005/foto001.jpg" class="outset" alt="jaarverslag 2005 foto 1" /></p>

...and it works

Thanks a lot all and enjoy your weekend!