Images And Css

[erisande]

In a portion of my CSS scripting, I have:

 

img {

border-style : none;

padding-right : 15px;

padding-top : 10px;

padding-bottom : 0px;

float : left;

margin-right : 1px; }

 

to make my imgs left aligned with the text flowing around the right side.

 

But now I also want to make another definition (class?) so I can mark an image to be centered and have the text forced below the img. How can I script it, and how do I implement it in the HTML code?

 

I believe the HTML code would be something like:

<DIV CLASS="importantimage">[basic IMG link]</DIV>

 

Thanks for any help!

[kaseytraeger]

Are you trying to add something like a caption beneath the photos? Or are you trying to have one photograph centered horizontally and then a paragraph underneath?

[erisande]

Maybe I should have just said... I want some pictures to have wrapped text, and some to be centered with any following text forced to go below it. I believe I just have to make a (sub)class of IMG.

[DarqFlare]

>img {
border-style : none;
padding-right : 15px;
padding-top : 10px;
padding-bottom : 0px;
float : left;
margin-right : 1px; }

img.subclassname {
float: center;
}

// later on...

<img src="source.jpg" class="subclassname" />

 

I'm not sure how to implement the text being forced below in CSS, you may want to research that online.

[kaseytraeger]

Adding to Robert's post...

 

You can force a line break by declaring any image of type "subclassname" to be displayed in block style. But keep in mind that this means the image will have forced line breaks both before and after the image. So it will essentially sit on its own line.

 

>img {
border-style : none;
padding-right : 15px;
padding-top : 10px;
padding-bottom : 0px;
float : left;
margin-right : 1px; }

img.subclassname {
float: center;
display: block; /* Force line breaks before and after the image */
}

// later on...
<img src="source.jpg" class="subclassname" />

 

I hope this is helpful!