Image centering

  • Thread starter Samuël van Laere
  • Start date
S

Samuël van Laere

Good afterneun,

I use some inline styling on a image and its paragraf tag:
<p style="text-align: center; margin: 1em">
<img style="text-align: center; margin: 1em" src="jesouk.jpg" width="500"
height="346" alt="Some alt text">
</p>

Now this centers the image on IE, FF, MZ, NS and OP
Though i'm not sure if both the paragraf and image tags need to be styled.
Anyhow, I figured that it would be better to make a class and call it like
this:

<p class="centered">
<img class="centered" src="http://www.oukje.nl/afbeeldingen/jesouk.jpg"
width="500" height="346" alt="
Foto van geleidehond Oukje in functie met haar vrouwtje Jessica"></p>

This being the class:
..centered { margin: 1em; text-align: center; }

But nope it won't center the image when done like that.
Is there anything missing that causes the image not to center?
Same stylerules inline do work, confusing to say the least.

Sure i've got a URL, but it only shows the inline style in action.


Regards,
Samuël van Laere
the Netherlands
 
P

Peter

Samuël van Laere said:
Good afterneun,

I use some inline styling on a image and its paragraf tag:
<p style="text-align: center; margin: 1em">
<img style="text-align: center; margin: 1em" src="jesouk.jpg" width="500"
height="346" alt="Some alt text">
</p>

Now this centers the image on IE, FF, MZ, NS and OP
Though i'm not sure if both the paragraf and image tags need to be styled.
Anyhow, I figured that it would be better to make a class and call it like
this:

<p class="centered">
<img class="centered" src="http://www.oukje.nl/afbeeldingen/jesouk.jpg"
width="500" height="346" alt="
Foto van geleidehond Oukje in functie met haar vrouwtje Jessica"></p>

This being the class:
.centered { margin: 1em; text-align: center; }

But nope it won't center the image when done like that.
Is there anything missing that causes the image not to center?
Same stylerules inline do work, confusing to say the least.

Sure i've got a URL, but it only shows the inline style in action.


Regards,
Samuël van Laere
the Netherlands
I changed this:
<div align="center"><img
src="http://www.oukje.nl/afbeeldingen/jesouk.jpg" width="500"
height="346" alt="
Foto van geleidehond Oukje in functie met haar vrouwtje Jessica"></div>

Centers perfectly
Peter
 
D

David Dorward

Samuël van Laere said:
I use some inline styling on a image and its paragraf tag:
<p style="text-align: center; margin: 1em">
<img style="text-align: center; margin: 1em" src="jesouk.jpg" width="500"
height="346" alt="Some alt text">
</p>

The text-align property on the img is pointless. Text align applies to block
elements and centres the inline content of that block. Images are inline.
Anyhow, I figured that it would be better to make a class and call it like
this:

<p class="centered">
<img class="centered" src="http://www.oukje.nl/afbeeldingen/jesouk.jpg"
width="500" height="346" alt="
Foto van geleidehond Oukje in functie met haar vrouwtje Jessica"></p>

This being the class:
.centered { margin: 1em; text-align: center; }

That isn't a class. "centered" is a class. That is a style using a class
selector.
But nope it won't center the image when done like that.

It should do. The reason it doesn't is most likely due to code you aren't
showing us. Try providing a URL in future. Code fragments can make it
easier to find the relevant portion, but are not always enough on their
own.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top