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/

Answer 2

您好已经习惯了 h1标记

中的display:inline-block;

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

所有标题元素都是块元素

的 Demo 的

Answer 3

事实上，h1是block element，但我认为您正在寻找：

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

这将使标题居中，而不占用父级的整个宽度。

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

为什么我的CSS边框会到达页面末尾？

3 个答案: