Can't have both center and left aligned text in same div?

OK, so I've run into a problem.

In my CSS, I have a div that has the p element formated to align center.

div.testimoney
{
background-image:url('images/img0001.jpg');
min-height:400px;
background-repeat:no-repeat;
margin-left: 100px;
margin-right: 100px;
}

div.testimoney p
{
padding:100px;
font-size:18px;
text-align:left;
}

My problem is that, within the same div, I want to have text that is aligned center. I want to have it like this:

XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXX

_______XXXXXXXXXXXX

(ignore the underscore, that should be white space but DP won't let me)

The bottom line of Xs being the centered text. How do I do that? Is the only way to create another div withing that div for the last bit of text that I want centered? I kind of tried that and it only worked partially. If that is the only way to do it than I might have to reset some things.

Thanks and appreciate the help ahead of time.

 

Well yes you will have to insert another block level element either a DIV or a P with an extra Class/ID and add text-align:center to that.

Something like div.testimoney p.tac { text-align:center; }

 

You can also apply inline CSS to the specific text that you want to align differently. Inline CSS will override the external CSS variables.


<p style="text-align: center;"> text to be aligned differently </p>

 

use differnt classes under <p>
for example

<p class="align-left"> aligned left </p>
<p class="align-right"> aligned right </p>

HTML:

ofcourse dont forget to style those classes

.align-left{
text-align: left;
}

.align-right{
text-align: right;
}

HTML:

 

However if you would like to keep things on the same line and have its on style use the span tag.

<span style="text-align:left;">Left text</span>
<span style="text-align:right;">Right text</span>

Code (markup):

 

I tried all these things before and got it centered but a few other things were screwed up (the text was 3/5ths further down the page). I just figured out that I had 100px bottom padding on the div.testimoney p text so when I created a seperate p tag to go below it, it went way further down. So I figured that one out by removing the bottom padding.

For some reason the <span> solution (which I tried earlier) did not work though. It would not even style the text (like change the font or anything. Even if it did work, can span be used to change text alignements? I thought it was just for styling.

 

True, you can't expect to align text inside an inline element. If the SPAN had a display:block; here then the align:center; could come into effect.