Centering field in <p> won't work - html

Question

I am no good in wrinting UIs in pure html... Right now I am trying to create a simple login page in pure html in css, but somehow I cannot get the Login button from here https://jsfiddle.net/2oxz5oja/ to be centered.
p {
display: table-row;
text-align: center;
}
Does this style work for table-row elements?
Could someone here give me an advice?

Answer 1

Sorry I'm having some issues with my Fiddle. So I've copy/pasted it here.
Try this:
HTML
<h3>Login here</h3>
<div id="loginMenu" class="mainDiv">
<form id="login-form" name="login-form" method="post" action="/konferencje-web/login.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="login-form" value="login-form" />
<p>
<label for="login-form:login" class="input-form">Login:</label>
<input id="login-form:login" type="text" name="login-form:login" class="input-form" />
</p>
<p>
<label for="login-form:password" class="input-form">Password:</label>
<input id="login-form:password" type="password" name="login-form:password" value="" class="input-form" />
</p>
<p>
<input id="login-form:button" class = "login" type="submit" name="login-form:button" value="Login" />
</p>
<p>
Info page
</p>
</form>
</div>
</html>
CSS
body {
background-color: #6B2424;
}
form {
display: table;
}
input {
display: table-cell;
margin: 0 auto;
}
label {
display: table-cell;
}
p {
display: table-row;
text-align: center;
}
li {
list-style-type: none;
line-height: 150%;
}
a {
color: #000000;
line-height: 30px;
vertical-align: middle;
text-align: center;
}
h1, h3 {
color: wheat;
font-size: 18px;
font-weight: bold;
text-align: center;
}
td {
text-align: center;
}
select {
min-width: 150px;
}
#login-form {
margin:0 auto;
text-align: center;
width: 50%
}
.mainDiv {
text-align: center;
background-color: bisque;
width: 500px;
border:2px solid;
border-radius:25px;
line-height: 30px;
vertical-align: middle;
margin:0 auto;
}
.login
{
position: relative;
left: 120px;
}
}