CODEWITHSUNDEEP
css
Ethan Turkeltaub
Ethan Turkeltaub

Reputation: 2961

Centering Issues

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:

alt text

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

Upvotes: 0

Views: 66

Answers (3)

Ethan Turkeltaub
Ethan Turkeltaub

Reputation: 2961

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

Thanks for your time, everyone.

Upvotes: 1

Jason McCreary
Jason McCreary

Reputation: 73031

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 &nbsp; between your links.

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

Upvotes: 0

Matt Mitchell
Matt Mitchell

Reputation: 41861

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.

Upvotes: 0

Related Questions