Filled Up 100% Of The Width But On Newline Doesn't Centre Align

I am trying to make a webpage with a box on the mainpage and it looks like this Login -----Or----- Register This is the code I have

Login

Solution 1:

I'd do it like this 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;
}

Solution 2:

Try this:

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

Should look like this: