Question

我有一个输入字段和一个按钮，我希望在中间并排水平和垂直居中（没有变换）。我可以很容易地修复定心部分，但是将输入区域和按钮并排放置已经证明要困难得多。无论出于何种原因，按钮的位置低于输入字段。

HTML和CSS：

body {
		background: #000;
		text-align: center;
	}
.hd {
		font-size: 3.9rem;
		font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
		color: rgb(250, 250, 250);
		margin-bottom: 30px;
	}
.content {
		margin: 0;
		position: relative;
    margin-top: 20vh;
	}
.form-control, .btn {
		display: inline-block;
		padding: 10px 25px;
		font-size: 1rem;
		font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
		border-radius: 0;
		-webkit-appearance: none;
	}
.form-group {
		display: inline-block;
	}
.form-control {
		border: 0;
		float: left;
		width: 250px;
	}
*:focus {
		outline: none;
	}
.form-controlt:focus{
		outline: none;
	}
.btn {
		background-color: lightgreen;
		border: 0;
		background-color: #ff8e41;
		-o-transition: all .3s;
		transition: all .3s;
		font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
		font-style: normal;
		font-weight: 600;
		position: relative;
		border: 0;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		margin: 0 auto;
		-webkit-appearance: button;
		cursor: pointer;
	}
.btn::-moz-focus-inner { 
		border: 0;
	}
.btn[type=submit]:active {
		background: #ed7a18;
		box-shadow: 0 1px 0 0 hsla(0,0%,100%,.27),inset 0 1px 0 0 #bc5f10;
	}
.btn[type=submit]:hover {
		background-color: #ffa353;
		-o-transition: all .3s;
		transition: all .3s;
	}

<div class="content">

  <div class="hd">Text</div>
  
	<form action="8dy9s8hsd9.php" method="POST">
  
		<div id="name-group" class="form-group">
			<input type="text" class="form-control">
		</div>

		<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>

	</form>
</div>

Answer 1

将input和button元素放在同一div .form-group类中。

body {
		background: #000;
		text-align: center;
	}
.hd {
		font-size: 3.9rem;
		font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
		color: rgb(250, 250, 250);
		margin-bottom: 30px;
	}
.content {
		margin: 0;
		position: relative;
    margin-top: 20vh;
	}
.form-control, .btn {
		display: inline-block;
		padding: 10px 25px;
		font-size: 1rem;
		font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
		border-radius: 0;
		-webkit-appearance: none;
	}
.form-group {
		display: inline-block;
	}
.form-control {
		border: 0;
		float: left;
		width: 250px;
	}
*:focus {
		outline: none;
	}
.form-controlt:focus{
		outline: none;
	}
.btn {
		background-color: lightgreen;
		border: 0;
		background-color: #ff8e41;
		-o-transition: all .3s;
		transition: all .3s;
		font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
		font-style: normal;
		font-weight: 600;
		position: relative;
		border: 0;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		margin: 0 auto;
		-webkit-appearance: button;
		cursor: pointer;
	}
.btn::-moz-focus-inner { 
		border: 0;
	}
.btn[type=submit]:active {
		background: #ed7a18;
		box-shadow: 0 1px 0 0 hsla(0,0%,100%,.27),inset 0 1px 0 0 #bc5f10;
	}
.btn[type=submit]:hover {
		background-color: #ffa353;
		-o-transition: all .3s;
		transition: all .3s;
	}

<div class="content">

  <div class="hd">Text</div>
  
	<form action="8dy9s8hsd9.php" method="POST">
  
		<div id="name-group" class="form-group">
			<input type="text" class="form-control">
      <button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
		</div>

		

	</form>
</div>

Answer 2

变化：

<div id="name-group" class="form-group">
    <input type="text" class="form-control">
</div>

<button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>

要：

<div id="name-group" class="form-group">
    <input type="text" class="form-control">

    <button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
</div>

body {
		background: #000;
		text-align: center;
	}
.hd {
		font-size: 3.9rem;
		font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
		color: rgb(250, 250, 250);
		margin-bottom: 30px;
	}
.content {
		margin: 0;
		position: relative;
    margin-top: 20vh;
	}
.form-control, .btn {
		display: inline-block;
		padding: 10px 25px;
		font-size: 1rem;
		font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
		border-radius: 0;
		-webkit-appearance: none;
	}
.form-group {
		display: inline-block;
	}
.form-control {
		border: 0;
		float: left;
		width: 250px;
	}
*:focus {
		outline: none;
	}
.form-controlt:focus{
		outline: none;
	}
.btn {
		background-color: lightgreen;
		border: 0;
		background-color: #ff8e41;
		-o-transition: all .3s;
		transition: all .3s;
		font-family: Open Sans,Segoe UI,Arial,Verdana,Tahoma,sans-serif;
		font-style: normal;
		font-weight: 600;
		position: relative;
		border: 0;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
		margin: 0 auto;
		-webkit-appearance: button;
		cursor: pointer;
	}
.btn::-moz-focus-inner { 
		border: 0;
	}
.btn[type=submit]:active {
		background: #ed7a18;
		box-shadow: 0 1px 0 0 hsla(0,0%,100%,.27),inset 0 1px 0 0 #bc5f10;
	}
.btn[type=submit]:hover {
		background-color: #ffa353;
		-o-transition: all .3s;
		transition: all .3s;
	}

<div class="content">

  <div class="hd">Text</div>
  
<form action="8dy9s8hsd9.php" method="POST">
  
	<div id="name-group" class="form-group">
		<input type="text" class="form-control">
	    <button type="submit" class="btn btn-success">Submit<span class="fa fa-arrow-right"></span></button>
	</div>
</form>
</div>

输入字段和按钮并排在中心

2 个答案: