为什么我的 CSS 边框会移至页面末尾？

Question

我一直在通过 codecademy 学习 HTML/CSS，我的 CSS 边框有这个问题。我需要我的 h1 以边框为中心，但我不希望该边框到达页面的末尾。这是我的代码

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

我计划很快制作一个单独的样式表，我只是将 CSS 放入 HTML 文档中进行测试。该边框到达页面的末尾，如果我放置 display:inline 或 display:inline-block 我的文本不再居中。如何使边框紧邻文本而不牺牲居中文本？

Answer 1

添加display:inline-block

h1标签是块元素，因此它占据了整个空间。

演示http://jsfiddle.net/rm3Fk/

如果您希望 h1 标签与页面居中对齐，那么您可以使用display:table; margin:0 auto

演示http://jsfiddle.net/rm3Fk/17/