I have <button/> and <input/> inside a container. How can I get them to align in the same row and in the middle of the container vertically (<div className="container">)?

This is what I have so far:

<div className="container">
   <div>
     <input className="form-control" placeholder='Enter Email'/>
   </div>
   <div>
     <button type="submit" className="btn"> Register </button>
   </div>
</div>

With className="container":

.container {
  width: 80%;
  margin: 0 auto;
  padding: 0 137px;
}

EDIT

I tried what you suggested with the following but the <input/> and <button/> is still on top of each other:

The top black portion is a navigation bar and I want to align everything inside the bar horizontally, next to each other from left to right.

       <div className="container">
          <h1>
            TESTING
          </h1>
          <input
            className="form-control"
            id="input-field"
            placeholder='Enter Email'
          />
          <button
            type="submit"
            className="btn"
          >
            Register
          </button>
      </div>

I have <button/> and <input/> inside a container. How can I get them to align in the same row and in the middle of the container vertically (<div className="container">)?

This is what I have so far:

<div className="container">
   <div>
     <input className="form-control" placeholder='Enter Email'/>
   </div>
   <div>
     <button type="submit" className="btn"> Register </button>
   </div>
</div>

With className="container":

.container {
  width: 80%;
  margin: 0 auto;
  padding: 0 137px;
}

EDIT

I tried what you suggested with the following but the <input/> and <button/> is still on top of each other:

The top black portion is a navigation bar and I want to align everything inside the bar horizontally, next to each other from left to right.

       <div className="container">
          <h1>
            TESTING
          </h1>
          <input
            className="form-control"
            id="input-field"
            placeholder='Enter Email'
          />
          <button
            type="submit"
            className="btn"
          >
            Register
          </button>
      </div>

• javascript
• html
• css
• angularjs
• reactjs

Share Improve this question Follow edited Sep 10, 2016 at 6:23 asked Sep 8, 2016 at 0:08 user2423124user2423124 1

• 2 These are very basic html5/css questions. Nothing to do with reactjs really. I suggest you study up a bit on these topics – Marc Commented Sep 8, 2016 at 22:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You can use flex-box for this. Swap out the class attribute for className in react

edit: To answer your edited question:

• align everything horizontally with align-items: center on the flex container
• Ensure the input and button don't break into separate lines by wrapping them together in a container element.

h1 { color: white; }

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222;
}

.email-holder {
  margin-left: 10px;
}

<div class="container">
  <h1>TESTING</h1>
  <div class="email-holder">
    <input class="form-control" placeholder='Enter Email'/>
    <button type="submit" class="btn"> Register </button>
  <div/>  
</div>