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

<divid="container"><p>Login</p><divid="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:010px;
}

Solution 2:

Try this:

<divclass="foo"><p>Login</p><divclass="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: