2

我一直在用 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 我的文本不再居中。我怎样才能在不牺牲居中文本的情况下使边框紧挨着文本？

4

3 回答 3

4

添加display:inline-block

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

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

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

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

于 2012-09-17T12:38:48.953 回答
1

嗨，现在习惯于 display:inline-block;在您的h1 标签中

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

所有标题元素都是块元素

演示

于 2012-09-17T12:38:54.290 回答
1

事实上，这h1是一个块元素，但我认为你正在寻找这个：

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

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

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

于 2012-09-17T12:51:12.153 回答