我有一個表格，看起來像這樣：如何讓兩個物體水平對齊（一個位於另一個的右側）並居中左側？
<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>
，我想輸入在頁面中水平居中，然後我想按鈕將它水平對齊和放置的權輸入元素。我該怎麼做呢？
我試圖讓它們都顯示：內聯塊和居中輸入，但我不能讓它工作。
此外，我使用引導，如果有幫助/不。 Here是整件事的小提琴
您可以使用表格佈局上.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>保持按鈕偏離中心，您可使用填充和絕對：
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>非常感謝您的詳細解答！ – user3494047
請嘗試漂浮：左;輸入並提交按鈕併爲您的表單添加寬度。將它們水平居中僅爲邊距：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;
}
謝謝。我怎樣才能使它以不同的寬度工作？使用百分比？你的解決方案適用於你發佈的寬度，我在這裏嘗試了https：// jsfiddle。net/k6bot5mu/1 /，但使用不同的寬度/不指定寬度，它總是向左溢出。對不起，如果這是顯而易見的，但我是新來的css/html – user3494047
是的，你總是可以使用百分比。但請注意，輸入和按鈕的寬度應適合表單的寬度。併爲了保證金0自動工作和中心的元素，它應該有一個寬度也有父div。 –
從你的問題我得知你只是想與該按鈕坐在右邊爲中心的輸入。其他答案只是將兩個元素集中在一起本示例使用引導列將輸入居中並將按鈕放置在右側。隨着窗口變小，它對窗口大小作出響應並在寬度上擴展。
<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>
我刪除了你的代碼，增加了這些小的變化，只修改了你的CSS，使用按鈕的margin-top。
button {
height: 25px;
margin-top: 1px;
}
form * {
margin: 10px, 10px, 10px;
}
input {
float: left;
margin-top: 2px;
}
給出輸入和按鈕'float：left'你也可以嘗試給它們兩個一定的寬度。對象應該以form-group元素爲中心 - 試着用'margin：auto'做到這一點 – Roysh
謝謝！我添加了一個html/css的小提琴並嘗試了你的建議，但是沒有指定它向左側溢出的寬度。 – user3494047
它是否適用於寬度？ 如果你正在使用boostrap，你可以通過colmd-12來形成組合類，然後使用col-md-6來輸入和按鈕類 – Roysh