Why cannot my button tag be centred as other input tags?

user_19324884 0
Viewed 57

I am trying to use HTML and CSS create a search box with a text input tag and a button input tag both centered within it. But the CSS code does not work to my button tag though it works to the other tag.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
}

#input-search {
  width: 200px;
  height: 30px;
  border: 1px solid #DCDCDC;
  margin: 9px 10px 9px 9px;
  border-radius: 5px;
  text-indent: 3px;
}

#btn {
  height: 30px;
  width: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  margin: 9px 9px 9px 0;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}
<div class="search-box">
  <input type="text" id="input-search" placeholder="search">
  <input type="button" value="GO" id="btn">
</div>

Based on my calculation, the margin on both sides is supposed to make the two tags perfectly centred in the div, but there seems to be some padding or margin which *{margin:0; padding:0;box-sizing:border-box;} cannot clear.

The button cannot be either centered vertically or be displayed in line with the text tag.Can anyone please help me fix the button tag?

Here is the full code: https://codepen.io/mayiscoding/pen/qBxLbYb

css html
3 Answers

Based on my calculation, the margin on both sides is supposed to make the two tags perfectly centred in the div

Your calculation is not fully correct, what you do is 200+9+10+50+9 which is 278, which seems to fit into the element with the width 278. But what you didn't include is the space between the two input elements introduced by the new line (Why does the browser renders a newline as space?).

If you remove that new line it will work:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
}

#input-search {
  width: 200px;
  height: 30px;
  border: 1px solid #DCDCDC;
  margin: 9px 10px 9px 9px;
  border-radius: 5px;
  text-indent: 3px;
}

#btn {
  height: 30px;
  width: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  margin: 9px 9px 9px 0;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}
<div class="search-box">
  <input type="text" id="input-search" placeholder="search"><!--
  --><input type="button" value="GO" id="btn">
</div>

But to avoid such problems, you might want to use display: flex instead of manually calculating the correct widths of the elements.

  • set the display of your .search-box to flex.
  • remove the width and height of both input elements, flex will handle that.
  • instead of setting a width to #btn set the desired padding.
  • use flex: 1 1 auto; on your #input-search to make it stretch and use the available size.

That way you can change the width of your .search-box without the need to change the width of the input elements, and you can update the font size of the button and the text. You can even make the .search-box responsive, by changing with to max-width.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
  display: flex;
}

#input-search {
  border: 1px solid #DCDCDC;
  margin: 9px 10px 9px 9px;
  border-radius: 5px;
  text-indent: 3px;
  flex: 1 1 auto;
}

#btn {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  margin: 9px 9px 9px 0;
  padding-left: 15px;
  padding-right: 15px;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}
<div class="search-box">
  <input type="text" id="input-search" placeholder="search">
  <input type="button" value="GO" id="btn">
</div>

To further improve the CSS I would remove the margin from the input elements, and change it to a padding on the .search-box and gap. And instead of a px unit for padding for the #btn I would use em.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input {
  outline: none;
}

.search-box {
  height: 50px;
  width: 280px;
  border: 1px solid #DCDCDC;
  background-color: #F5F5F5;
  margin: 10px auto;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #D3D3D3, -2px 2px 1px #D3D3D3;
  display: flex;
  padding: 9px;
  gap: 10px;
}

#input-search {
  border: 1px solid #DCDCDC;
  border-radius: 5px;
  text-indent: 3px;
  flex: 1 1 auto;
}

#btn {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #008080;
  display: inline-block;
  padding-left: 1.2em;
  padding-right: 1.2em;
  background-image: linear-gradient(#20B2AA, #5F9EA0);
}
<div class="search-box">
  <input type="text" id="input-search" placeholder="search">
  <input type="button" value="GO" id="btn">
</div>

user_19604550

Put a display from inline-block to block and change the margin to 9px auto. The auto will center the button horizontally.

user_144500650

Change

#btn{
    margin: 9px auto;
}
user_62789230
Related