Question

I have been learning HTML/CSS with codecademy, and I have this problem with my CSS border. I need my h1 to be centered with a border, but I don’t want that border to go to the ends of the page. Here is my code

<h1 style="color:#0034ff; padding:20px; border-style:ridge; border-width:5px; text-align:center;">HTML Testing Page</h1>

I plan on making a seperate style sheet soon, I just put the CSS in the HTML document to test it. This border goes to the ends of the page, and if I put display:inline or display:inline-block my text is no longer centered. How could I make the border just go next to the text without sacrificing centered text?

Answer 1

Indeed, the h1 is a block element, but I think you are looking for this:

h1 {
    color:#0034ff;
    padding:20px;
    border-style:ridge;
    border-width:5px;
    margin: 0 auto; /* <--- */
    display: table; /* <--- */ 
}​

This will center the heading without it taking the entire width of the parent.

http://jsfiddle.net/rm3Fk/11/