html - 填充了 100% 的宽度，但换行符上的 <p> 没有居中对齐

Question

我正在尝试在主页上制作一个带有框的网页，它看起来像这样

Login
-----Or-----
Register

这是我的代码

<center>
   <p>Login</p>
    <hr style="width: 16%; float: left; margin-left:30%;"/>
     <p style="float: left; margin-left:2%; margin-right: 2%; width: 4%;">Or</p>
    <hr style="width: 16%; float: right; margin-right: 30%;"/>
   <p>Register</p>
</center>

看起来像这样-

我有 1 个问题和 1 个需要帮助的事情

问题是 Register 文本没有对齐，即使它应该对齐，我需要帮助的是让

---

行在 Or 文本的中间位置

像这样——

请帮我解决这个问题。

Answer 1

我会这样做 jsFiddle example .

HTML

<div id="container">
    <p>Login</p>
    <div id="or"> <span>Or</span>
    </div>
    <p>Register</p>
</div>

CSS

#container {
    text-align:center;
}
#or {
    height: 2px;
    background-color: black;
    text-align: center;
}
span {
    background-color: white;
    position: relative;
    top: -0.5em;
    padding:0 10px;
}