居中 <hr> 标签

Posted 2023-03-05

【中文标题】居中 <hr> 标签

【英文标题】：Centering an <hr> tag

【发布时间】：2014-09-05 03:05:43

【问题描述】：

我在 html 中的 hr 标记遇到了一些问题，因为它没有像我期望的那样自动居中。这是我当前代码的样子：

<div id = "updatestatus" class = "statuscontainer">
    <div class = "verticalalign">Update Status</div>
</div>
<hr width = "95%">

<div id = "insertstatus" class = "statuscontainer">
    <form></form>
</div>

如您所见，我将hr 标签放在两个divs 之间，我相信它应该自动居中，但它最终会向左移动。我也试过hr align = center 也没有成功。

编辑：我刚刚意识到，当我将整个 hr 标记放在 <center></center> 中时，它会居中，但我仍在试图弄清楚为什么它不自己居中。

【问题讨论】：

如this demo 所示，<hr> 居中（我夸大了那里的宽度）。使用浏览器的检查器查看元素的计算样式（注意 margin，它与 <hr> 对齐）以及它真正的 align 属性是什么。

人力资源中心很好，你指的是更新状态吗？

有趣..我确定当我查看我的 html 页面时，HR 向左对齐而不是居中。不幸的是，我指的是 HR，而不是更新状态

我想这与我的 CSS 有关。但我觉得这很奇怪，因为我没有在任何容器中向左浮动任何东西

你的 CSS 是什么样的？

【参考方案1】：

试试margin: auto;

<hr style="width:100px; margin: auto;" />

【参考方案2】：

我在我的 CSS 上使用 !important

<hr style="width:50%; margin-left:25% !important; margin-right:25% !important;" />

【讨论】：

使用!importantonly when you really need it很重要。