How can I have two objects aligned horizontally (one to the right of the other) and center the left one?

Question

I have a form which looks like this:

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

and I want the input to be horizontally centered in the page and then I would like the button to be aligned with it horizontally and placed to the right of the input element. How do I do this?

I have tried making them both display: inline-block and centering the input but I can't get it to work.

Also I am using bootstrap if that helps/doesn't. Here is a fiddle of the whole thing

Answer 1

You could use the table layout on .form-group to shrink it on its content and center it via 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> 

to keep button off center, you may use padding and 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

Please try to float: left; both input and submit button and add a width to your form. to center them horizontally just margin: 0 auto to your form.

like this:

<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

From your question I gathered that you only wanted the input centered with the button sitting to the right. The other answers simply center both elements. This example uses bootstrap columns to center the input and place the button to the right. It is responsive to the window size and expands in width as the window gets smaller.

<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

I removed your code and added these small changes, only modified your CSS, using margin-top of the button.

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