如何使兩個對象水平對齊（一個在另一個的右側）並居中放置一個？

Question

我有一個看起來像這樣的表格：

<div class="container">
    <form action="/my-handling-form-page" method="post">
      <div class="form-group">
        <input type="text" name="query"/>
        <button type="submit">Search</button>
      </div>
    </form>
</div>

我希望輸入在頁面中水平居中，然后希望按鈕與它水平對齊並放置在輸入元素的右側。 我該怎么做呢？

我試圖使它們都顯示：內聯塊和居中輸入，但我無法使其正常工作。

如果有幫助/無用，我也正在使用引導程序。 這是整件事

Answer 1

您可以在.form-group上使用表格布局來縮小其內容並通過margin居中：

 body { margin: 10px; } .form-group{ display:table; margin: 0 auto; } input, button{ float: left; } /* optionnal to take button off from center calculation */ /* demo purpose */ html:hover button { position:absolute; } body { min-height:100%; background:linear-gradient(to left, transparent 50%, lightgray 50%); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <form action="/my-handling-form-page" method="post"> <div class="form-group"> <input type="text" name="query" class="searchbar same-line centered"/> <button type="submit" class="same-line">Search</button> </div> </form> </div> 

要使按鈕偏離中心，可以使用padding和absolute：

 body { margin: 10px; } .form-group{ display:table; margin: 0 auto; padding:0 5em;/* to keep button in sight if window comes very small */ } input, button{ float: left; } button { position:absolute; } body { min-height:100%; background:linear-gradient(to left, transparent 50%, lightgray 50%); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <form action="/my-handling-form-page" method="post"> <div class="form-group"> <input type="text" name="query" class="searchbar same-line centered"/> <button type="submit" class="same-line">Search</button> </div> </form> </div> 

Answer 2

請嘗試浮動：左； 輸入和提交按鈕，並在表單中添加寬度。 將其水平居中放置邊緣：0自動生成表單。

像這樣：

<div class="container">
<form action="/my-handling-form-page" method="post">
  <div class="form-group">
    <input type="text" name="query"/>
    <button type="submit">Search</button>
  </div>
</form>
</div>

CSS：

.container{
 width: 800px;
 background: #000;
}

form{
 width: 200px;
 background: #fff;
 margin: 0 auto;
}

input, button{
width: 50px;
float: left;
}

Answer 3

從您的問題中我得出結論，您只希望輸入與位於右側的按鈕居中。 其他答案只是將兩個元素居中。 本示例使用引導程序列將輸入居中並將按鈕放置在右側。 它對窗口大小有響應，並且隨着窗口變小而在寬度上擴展。

<div class="container">
    <form action="/my-handling-form-page" method="post" class="row">
      <div class="form-group">
        <div class="col-xs-10 col-xs-offset-0 col-md-4 col-md-offset-4">
        <input type="text" name="query" class="form-control"/>
        </div>
        <div class="col-xs-2 col-md-4">
        <button type="submit" class="btn btn-default">Search</button>
        </div>
      </div>
    </form>
</div>

http://codepen.io/rawiki/pen/PzNZwz

Answer 4

我刪除了代碼並添加了這些小的更改，僅使用按鈕margin-top修改了CSS。

button {
  height: 25px;
  margin-top: 1px;
}
form * {
  margin: 10px, 10px, 10px;
}
input {
  float: left;
  margin-top: 2px;
}