如何使两个对象水平对齐（一个在另一个的右侧）并居中放置一个？

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