我在div中创建了一个登录表单(我更喜欢为此使用表格-请忽略值中的php)。问题是我的“提交”和“创建新帐户”表行/数据仅相对于不是输入字段的表数据居中。我希望最后两行相对于整个用户名和密码行居中。
如何使最后两行居中?我尝试用这些特定的行创建一个新表并将它们居中,这没有什么区别。任何输入将不胜感激。
这是HTML / CSS和输出的链接:http://jsbin.com/sepipolohu/4/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<h1>Welcome to my website!</h1>
<h2>Please login below.</h2>
<h3>Don't have an account? Create one here.</h3>
<div class="formFormat">
<form name="loginForm" method="post" action="<?php? $_SERVER['PHP_SELF'];>" >
<table id="cssTable">
<tr>
<td>Username:</td><td><input type="text" id="user" name="user" value="<?php echo $user_name?>" /></td>
</tr>
<tr>
<td>Password:</td><td><input type="text" id="pass" name="pass" value="<?php echo $user_password?>"/></td>
</tr>
<tr>
<td><input type="submit" name="submitLogin"/></td>
</tr>
<tr>
<td id="createAccount">Create an account.</td>
</tr>
</table>
</form>
</div>
</body>
</html>
CSS:
body {
width: 100%;
height: 100%;
text-align:center;
font-family: helvetica;
font-color: white;
background-image: url(https://download.unsplash.com/phto-1429091967365-492aaa5accfe);
}
.formFormat{
padding: 10px;
height: 150px;
width:240px;
border: 1px black solid;
display:inline-block;
position: relative;
}
#createAccount {
font-style: italic;
}
最佳答案
删除这个
<tr>
<td><input type="submit" name="submitLogin"/></td>
</tr>
<tr>
<td id="createAccount">Create an account.</td>
</tr>
并将代码放在
</table>
之后和</form>
之前<input type="submit" name="submitLogin"/>
<span id="createAccount">Create an account.</span>
将
<br/>
放在<input type="submit" name="submitLogin"/>
和<span id="createAccount">Create an account.</span>
如果要在按钮下输入文本“创建帐户”。看here