Form Input Alignment Issue (HTML/CSS)

Question

Context:

I'm relatively new to HTML/CSS and have been tasked with creating a search form for my company's website. I have all the actual code working beautifully, but the thing thats stumping me is a simple style issue. In the search form, the text input field and the button input field do not align vertically very nicely, and I cannot get them to cooperate via CSS. I'd like them both to be the same height and level with each other. Any advice? Thank you!

Search Form

Code:

#srchContainer {
  width: 70%;
  height: 100%;
  border: 0px;
  margin: 0 auto;
  padding: 0;
}
#searchForm {
  text-align: center;
  margin: 20px auto;
  padding: 0;
  width: 100%;
  vertical-align: top;
}
#searchInputBox {
  width: 60%;
  height: 31px;
  border: 1px solid #717171;
  font-size: 1.5em;
  margin: 0;
  padding: 0 0 0 5px;
  display: inline;
}
#srchBtn {
  height: 32px;
  margin-left: 2px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 0px;
  padding-top: 1px;
  display: inline;
}
.btn {
  color: #717171;
  border-radius: 0px;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 1px;
  padding-top: 1px;
  border: 1px solid #717171;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 0px;
  margin-bottom: 2px;
  height: 20px;
}
.btn:hover,
.btn2:hover {
  background-color: #717171;
  color: white;
}

<html>

<body>
  <div id="searchContainer">
    <form id="searchForm">
      <input type="text" id="searchInputBox" />
      <input type="button" id="srchBtn" class="btn" value="Search" />
    </form>
  </div>
</body>

</html>

It's worth noting that the root cause of your problem is the font-size set on the text input. — technophobia
– technophobia, Commented Nov 11, 2015 at 16:32

dsgriffin · Accepted Answer · 2015-11-11 16:30:13Z

1

Apply vertical-align: middle; to both of the input elements.

answered Nov 11, 2015 at 16:30

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Uncle Bojangles Over a year ago

Amazing how easy it is to overlook something so simple. I had attemped using this on the parent elements, but not on the inputs themselves. Thank you very much!

Romulo · Accepted Answer · 2015-11-11 16:31:44Z

0

You can easily work in the alignment using the CSS flexbox.

See the following link to check the browser support.

Here´s a quick example:

.navbar {
  display: flex;
}
.navbar input {
  flex: 1;
}
.navbar button {
  border: 1px solid #aaa;
  margin-left: 3px;
}

<div class="navbar">

  <input type="text">

  <button type="button">search</button>

</div>

answered Nov 11, 2015 at 16:31

Romulo

5,1542 gold badges21 silver badges31 bronze badges

Collectives™ on Stack Overflow

Form Input Alignment Issue (HTML/CSS)

Context:

Code:

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Context:

Code:

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related