Connecting Tech Pros Worldwide Forums | Help | Site Map

Centering a single line in a div

Member
 
Join Date: Sep 2007
Posts: 47
#1: Sep 25 '07
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:
Expand|Select|Wrap|Line Numbers
  1. /*News section on Index Page*/
  2. .news {
  3. margin-left:    auto;
  4. margin-right:    auto;
  5. width:        500px;
  6. border-left:    1px solid;
  7. border-right:    1px solid;
  8. }
  9. .newshead {
  10. text-align:    center;
  11. color:        red;
  12. }
  13. .news em {
  14. font-weight:    bold;
  15. }
HTML:
Expand|Select|Wrap|Line Numbers
  1. <div class="news">
  2. <span class="newshead">Latest News:</span><br>
  3. <em>9-18-07</em><br>
  4.  . . . Cut out regular text . . .
  5. </div>
  6.  
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's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,571
#2: Sep 25 '07

re: Centering a single line in a div


Have you fixed this? Looks centered to me.
Member
 
Join Date: Sep 2007
Posts: 47
#3: Sep 25 '07

re: Centering a single line in a div


Quote:

Originally Posted by drhowarddrfine

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's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,571
#4: Sep 25 '07

re: Centering a single line in a div


Quote:
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}
Member
 
Join Date: Sep 2007
Posts: 47
#5: Sep 25 '07

re: Centering a single line in a div


Quote:

Originally Posted by drhowarddrfine

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's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,571
#6: Sep 25 '07

re: Centering a single line in a div


h3{margin:0} .
Member
 
Join Date: Sep 2007
Posts: 47
#7: Sep 25 '07

re: Centering a single line in a div


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!
Reply


Similar HTML / CSS bytes