我在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

10-05 21:02
查看更多