html - 填充了 100% 的宽度，但在换行符上不居中对齐

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 文本没有对齐，即使它应该对齐，我需要帮助的事情是让 < hr> 行位于 Or 文本的一半

像这样 -

请帮我解决一下这个。

Answer 1

我会像这个jsFiddle 示例那样做。

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;
}

Answer 2

尝试这个：

<div class="foo">
    <p>Login</p>
    <div class="hr"><p>or</p></div>
    <p>Register</p>
</div>

.foo{text-align:center;line-height:1em;}
.foo .hr p{background:#fff;margin:0;position:relative;z-index:2;display:inline-block;padding:0 1em;}
.foo .hr:after{border-bottom:1px solid #000;content: " ";display:block;position:relative;top:-0.5em;}

应该是这样的：