html - 为什么我的 CSS 边框会到达页面末尾?

标签 html css border center

我一直在用 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,我的文本将不再居中。如何在不牺牲居中文本的情况下使边框紧挨着文本?

最佳答案

添加display:inline-block

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

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

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

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

关于html - 为什么我的 CSS 边框会到达页面末尾?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12459316/

相关文章:

javascript - 使用 jQuery 如何检测何时接近屏幕底部?

安卓发光边框

javascript - 网页-button.onclick = func();与 <button onclick = "func()"?

javascript - 在 jquery 中设置 css 时,Chrome 中的背景颜色不会改变

javascript - 如何将 html 按钮链接到目录中的另一个 html 文件?

具有边框半径和线性渐变的 CSS 过渡

ios - UIView底部边框?

javascript - .load() 动画与外部网页?

css - 为什么最后一个列表元素在 Chrome 中换行? ( float 容器内有边距的列表)

css - 两层 Bootstrap 3 导航