Centering Issues

Question

I'm trying to center a long line of text. Instead of all being on the same line, it's separating over two lines.

Here is the HTML:

<div id="head">
    <h1>Hello</h1>
    <p><a href="#">Last.fm</a> / <a href="#">Twitter</a> / <a href="#">Dribbble</a> / <a href="#">GitHub</a></p>
</div>

And the CSS:

#head{
 border-bottom: 1px solid #ccc;
 margin: 0 auto;
 width: 760px;
 text-align: center;
}

#head p{
 line-height: 1em;
 margin: 0;
}

And I get this result:

I feel obscenely dumb. There's probably an easy answer to this, but I can't wrap my head around it. Help?

Answer 1

You aren't closing your <p> tag

Are you sure there's no other CSS affecting the relevant elements? (e.g. check in FireBug).

Try placing !important after your #head width to see if this corrects things. If so then you have a cascading issue that you need to resolve.

Answer 2

It's going automatically to wrap at white space when the p tag is not large enough to contain all the text on one line. It would appear that you should have enough width based on your styles, but without seeing the page, it's tough to know.

You could add white-space: no-wrap; to your #head p styles or insert   between your links.

Post a link if you can as it seems what you have should work.

Answer 3

Found the problem. I inserted an extra </p>. Doh!

Thanks for your time, everyone.