通过CSS中心按钮？

Question

我想将提交按钮居中，但是当我将对齐设置为居中时，它无法正常工作。我之前曾问过这个问题，但在我的案例中并没有起作用。 我的css代码

＆＃13;

＆＃13;

input[type=submit] {
	width:40%;
    background-color: #4CAF50;
    color:Black;
	font-size:16px;
    padding: 14px 20px;
    border-radius: 4px;
    cursor: pointer;
	text-align:center;
	
}

＆＃13;

＆＃13;

＆＃13;

我的整个CSS代码

＆＃13;

＆＃13;

	div {
    border-radius: 5px;
    background-color:#efcbcb;
	}
	
	
.lay{
	display:block;
	float:left;
	height:500px;
	width:600px;
	text-align:center;
	float:right;
	}
	
input[type=submit] {
	width:40%;
    background-color: #4CAF50;
    color:Black;
	font-size:16px;
    padding: 14px 20px;
    border-radius: 4px;
    cursor: pointer;
	margin:0 auto;
	
}
.sub{
text-align:center;
	}

	
	label{
    
    float: left;
    clear: left;
    width: 250px;
	height:40px;
  
}
    input {
	   border: 2px solid grey;
	   float: left;
     }

＆＃13;

＆＃13;

＆＃13;

我的表格代码

＆＃13;

＆＃13;

<div class="lay">
<p class="reg"><h1>Registration Form</h1></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<label>Username:</label> <input type="text" name="username"  value="<?php echo $username;?>" id="username"  />
  <span class="error"> <?php echo $usernameErr;?></span>
<br /><br />
<label>Password:</label> <input type="text" name="password"  value="<?php echo $password;?>" id="password"  />
  <span class="error"> <?php echo $passwordErr;?></span>
<br /><br />
<label>Email:  </label>  <input type="text" name="email"     value="<?php echo $email;?>" id="email"     />
  <span class="error"> <?php echo $emailErr;?></span>
<br /><br />
<label>Contact:</label>  <input type="text" name="contact"   value="<?php echo $contact;?>" id="contact"   />
  <span class="error"> <?php echo $contactErr;?></span>
<br /><br />
<label>Facebook:</label> <input type="text" name="facebook"  value="<?php echo $facebook;?>" id="facebook"  />
  <span class="error"> <?php echo $facebookErr;?></span>
<br /><br />
<label>Cnic No:</label>  <input type="text" name="cnic"      value="<?php echo $cnic;?>" id="cnic"      />
  <span class="error"> <?php echo $cnicErr;?></span>
<br /><br />
<label>Expertise:</label><input type="text" name="expertise" value="<?php echo $expertise;?>" id="expertise" />
  <span class="error"> <?php echo $expertiseErr;?></span>
<br /><br /><br /><br />
<div class="sub"><input type="submit" name="register" value="Register" id="register" /></div>
</form>
</div>

＆＃13;

＆＃13;

＆＃13;

我的结果：

Answer 1

使用type = "submit"代替type = submit

input[type="submit"] {
    width:40%;
    background-color: #4CAF50;
    color:Black;
    font-size:16px;
    padding: 14px 20px;
    border-radius: 4px;
    cursor: pointer;
    text-align:center;

}

Answer 2

尝试将此添加到您的input[type="submit"] CSS：

    left: 50%;
    transform: translate(-50%, -50%)    

Answer 3

请参阅此fiddle

您应该移除浮动以使其居中。这是提交按钮的更新CSS。我使用过float:none;。

更新CSS

input[type=submit] {
  width: 40%;
  background-color: #4CAF50;
  color: Black;
  font-size: 16px;
  padding: 14px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 auto;
  float: none;
}

<强>更新

从评论中读取您使用transform css使其正常工作。但是，请注意，transform css仅适用于IE 9+和其他webkit浏览器。

在docs

中详细了解相关信息

Answer 4

在HTML中，编辑为

<div class="sub">
<button class="button" type="submit" name="register"  id="register">Register</button>
</div>

在CSS中，编辑为

.button {
    position: absolute;
    top: 90%;
}