Question

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

Answer 1

删除此

<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

Answer 2

在.formFormat

中将宽度更改为自动

width:auto;

如果您想要按钮和＆＃34;创建帐户＆＃34;文本到中心只是将它们包装在中心标签中。 <center> </center>

中心表数据相对于输入

2 个答案: