我在一个 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
关于html - 相对于输入的中心表数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30387194/