javascript - ReactJS: How can I align form <Field>'s <input> and <button> and

admin管理员组

文章数量:1422366

I have <button/> and <input/> inside a container. How can I get them to align in the same row, next to each other, and in the middle of the container vertically?

This is what I have so far:

The top black portion is a navigation bar and I want to side-by-side align them in a row, next to each other from left to right, and align them vertically in the middle of the navigation bar:

PLEASE TAKE A LOOK AT EDIT AT THE BOTTOM FOR UPDATED CODE

       import { Field, reduxForm } from 'redux-form';

       const form = reduxForm({
         form: 'register'
       });

       ...

  <div id="wrapper">
    <header>
       <div className="container">
        <h1>
          TESTING
        </h1>
        <form>
            <Field
              name="email"
              className="form-control"
              ponent={
                  <div>
                    <input
                      className="form-control"
                      id="input-field"
                      placeholder='Enter Email'
                    />
                 </div>
              }
              type="text"
            />
            <button
              type="submit"
              className="btn"
            >
              Register
            </button>
          </form>
        </div>
    </header>
  </div>

And CSS stylesheet:

#wrapper {
  width: 100%;
  margin: 0 auto;
}

.container {
  display: flex;
  justify-content: center;
}

header {
  width: 100%;
  height: 85px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: black;
  }
header h1#logo {
  display: inline-block;
  height: 85px;
  line-height: 85px;
  float: left;
  font-size: 25px;
  color: purple;
  font-weight: 500;
}

#input-field {
  background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  width: 150px;
  height: 40px;
  padding: 5px;
}

EDIT

Decided to take the Form out but CSS stay the same. How can I flex align the following to achieve what I originally wanted (Would like to have the h1 to the left and text field + button to the right?

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

I have <button/> and <input/> inside a container. How can I get them to align in the same row, next to each other, and in the middle of the container vertically?

This is what I have so far:

The top black portion is a navigation bar and I want to side-by-side align them in a row, next to each other from left to right, and align them vertically in the middle of the navigation bar:

PLEASE TAKE A LOOK AT EDIT AT THE BOTTOM FOR UPDATED CODE

       import { Field, reduxForm } from 'redux-form';

       const form = reduxForm({
         form: 'register'
       });

       ...

  <div id="wrapper">
    <header>
       <div className="container">
        <h1>
          TESTING
        </h1>
        <form>
            <Field
              name="email"
              className="form-control"
              ponent={
                  <div>
                    <input
                      className="form-control"
                      id="input-field"
                      placeholder='Enter Email'
                    />
                 </div>
              }
              type="text"
            />
            <button
              type="submit"
              className="btn"
            >
              Register
            </button>
          </form>
        </div>
    </header>
  </div>

And CSS stylesheet:

#wrapper {
  width: 100%;
  margin: 0 auto;
}

.container {
  display: flex;
  justify-content: center;
}

header {
  width: 100%;
  height: 85px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: black;
  }
header h1#logo {
  display: inline-block;
  height: 85px;
  line-height: 85px;
  float: left;
  font-size: 25px;
  color: purple;
  font-weight: 500;
}

#input-field {
  background-color: rgba(255,255,255,0.1);
  border-radius: 5px;
  width: 150px;
  height: 40px;
  padding: 5px;
}

EDIT

Decided to take the Form out but CSS stay the same. How can I flex align the following to achieve what I originally wanted (Would like to have the h1 to the left and text field + button to the right?

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

• javascript
• html
• css
• reactjs

Share Improve this question Follow edited Sep 10, 2016 at 6:26 asked Sep 10, 2016 at 1:27 user3259472user3259472

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

.container{
    display:flex;
     align-items:center;}

EDIT

This is how you do this with the flex property.

Also, be sure to replace all the className in HTML with class. Be sure to style your input and button according to your likings.

.container {
  display: flex;
}
h1,
.btn,
#input-field {
  flex: 1;
}

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

BEFORE EDIT

Although table elements should not be used for aligning elements next to each other(they are meant for storing tabular data), using tables is indeed a working solution to your problem.

-- Yash Jain --

Here is a live example on a JSfiddle with your exact same elements.

So don't say in the ments that tables should not be used for formatting, since I CLEARLY stated it.

And this code is 100% GUARANTEED to work, because you can't override a table in CSS despite whatever code you have.

Take a look at this code snippet first.

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

Stop to using 'float' prop and use this for the form tag:

form {
   display: flex;
   align-items: center;
}

also you can use 'gap' property for adding gap between items:

form {
   display: flex;
   align-items: center;
   gap: 1rem; /* for example */
}

I know I'm late to this, but I'd like to give some more context on why you should use flex and how in this scenario.

form {
 display: flex;
 flex-direction: row; 
 // Not necessary here, since row is the standard, but good to realize what it means.
 // Flex 'row' means the objects in this container will appear horizontally next to each other. Column would be vertical.
 align-items: center;
 // When 'row', this is the vertical alignment, with column the other way. 
 // In this case then, it would mean that your items center vertically in the container.
 gap: 1rem; 
 // This is a solid approach. Alternative would be to set the justify-content, which controls the spacing of the flex-direction.
 // 'space-evenly' here is often the standard, but you would need to set the container width accordingly.
}

Hope this helps people just starting to learn about flex and stumbling on this post. My first experience with flex was confusing, especially the relation of flex-direction towards align-items and justify-content.

本文标签：