Centering a single line in a div

[Michael7]

Hi everyone,

Me again! I'm having a problem centering a single line in a div.

I have a news section that is a block of it's own, and centered. The text in the news section is left aligned of course, but I want the "Latest News" line at the top to be centered within that block. Mimicing the News Section at the bottom of my page here:
http://www.workmenforChrist.org/

I cannot seem to get it at all! I managed to get it to be red, but not centered!

The code I presently have is this (I've tried all sorts of code, but nothing I tried, worked):
CSS:

/*News section on Index Page*/
.news {
margin-left:    auto;
margin-right:    auto;
width:        500px;
border-left:    1px solid;
border-right:    1px solid;
}
.newshead {
text-align:    center;
color:        red;
}
.news em {
font-weight:    bold;
}

HTML:

<div class="news">
<span class="newshead">Latest News:</span><br>
<em>9-18-07</em><br>
 . . . Cut out regular text . . .
</div>
 

It has to be possible to simply center the "Latest News:" text! I can't use something like "p.newshead" that which will add space after the line.

Thank you all for the continued help!

[drhowarddrfine]

Have you fixed this? Looks centered to me.

[Michael7]

Have you fixed this? Looks centered to me.

It does? It's not appearing centered on any of the browsers I've looked in. I know the block of text is, but I want the single line with the words: "Latest News" to be centered in that block.

The link I had provided wasn't the page I'm working on, but is what I am trying to mimic because right now it's all done through tables and such, instead of the CSS.

[drhowarddrfine]

The link I had provided wasn't the page I'm working on

That's my mistake. The problem is that <span> is for inline styling and inline elements cannot be moved unless you change them to block: {display:block;text-align:center}.

However, the thing nowadays is to create mark-up that is "semantically" correct, ie, the tag matches what the content is. In other words, "Latest News" is a headline for the rest of the column so it should be a <hx>, such as <h3>. Doing so then allows you to just do:
.news h3{text-align:center}

[Michael7]

That's my mistake. The problem is that <span> is for inline styling and inline elements cannot be moved unless you change them to block: {display:block;text-align:center}.

However, the thing nowadays is to create mark-up that is "semantically" correct, ie, the tag matches what the content is. In other words, "Latest News" is a headline for the rest of the column so it should be a <hx>, such as <h3>. Doing so then allows you to just do:
.news h3{text-align:center}

Oh okay, I was wondering a bit of the <span> tag. Thanks :)

As for putting the "Latest News" in a heading tag, I had thought about that, but it also puts that extra space (not sure how else to decribe it) after it. I was looking for a way to not have that "skipped line" that comes with the heading tags, paragraph tags, and other things.

Is there no other way to do this correctly?

EDITED:
. . . Well . . . I guess I will just made it a Header. The space isn't too too bad if one isn't so used to seeing it without it. Besides, I suppose it would made it more correct to do it this way, right? Thanks for the help, I was trying to use the <span> to position, when the only way to position something like that would be as a block of it's own. Thanks again!

~Michael

[drhowarddrfine]

h3{margin:0} .

[Michael7]

Wow, thanks! I didn't realize the spacing for those elements (<h#>, <p>, et al.) was done by the margin! Sheesh, it makes sense, afterall, thinking about the list elements that I had to deal with!

Sorry about that, and thanks so much!