How to vertically align this input and button that are on the same line?

Question

This code works but the <input> is not perfectly vertically aligned with its button:

.wrapper {
  height: 25px;
}
.myinput {
  box-sizing: border-box;
  width: 150px;
  height: 100%;
}
.mybutton {
  display: inline-block;
  box-sizing: border-box;  
  height: 100%;
  padding: 2px 10px;
  background-color: #57A3E7;
  color: white;
}

<div class="wrapper">
  <input class="myinput" placeholder="hello@example.com" type="email"> 
  <div class="mybutton">Go!</div>
</div>

How to perfectly align them (in height and vertical position), but without using flex, etc.?

@Loko since `box-sizing: border-box;`, it should be good, don't you think so? — Basj, Jan 14 '20 at 11:17
Note a duplicate, details are important here ; look at the linked question answer: http://jsfiddle.net/Lighty_46/RHM5L/9/, you'll see it's not. — Basj, Jan 14 '20 at 14:07
what you need is this line in the accepted answer of the duplicate *Because the vertical-align is set at baseline as default.* Understanding this, you can fix you issue. As a side note, you made both your element to be equal in height so aligning to the top is also aligning to the middle or the bottom. — Temani Afif, Jan 14 '20 at 14:11
add `vertical-align:top` to both your elements like suggested in the duplicate and see the result — Temani Afif, Jan 14 '20 at 14:13
@TemaniAfif If we have to modify the other question's answer, etc. and add new details (not mentioned except in your last comment) it's not really a duplicate, i.e. a future reader won't find the solution with the linked duplicate without your last comment. I suggest we remove the duplicate mention. — Basj, Jan 14 '20 at 14:14
I have added another duplicate with a *lot* of details if you want. You need to be patient to read it and understand it. And the comments are meant to add more details and they are a part of the system so future reader will read it. As a side note, none of the below answers give an explanation and none of them mention *baseline* which is the key to solve your issue. The accepted answer of the duplicate is actually the best one (it also include the float solution) — Temani Afif, Jan 14 '20 at 14:18

score 0 · Answer 1 · answered Jan 14 '20 at 11:22

0

Just add float:left to .myinput

.wrapper {
  height: 25px;
}

.myinput {
  box-sizing: border-box;
  width: 150px;
  height: 100%;
  float:left;
}

.mybutton {
  display: inline-block;
  box-sizing: border-box;
  height: 100%;
  padding: 2px 10px;
  background-color: #57A3E7;
  color: white;
}

<div class="wrapper">
  <input class="myinput" placeholder="hello@example.com" type="email">
  <div class="mybutton">Go!</div>
</div>

answered Jan 14 '20 at 11:22

doğukan

23,073
13
57
69

Thank you for your answer! Do you know why it didn't work without the `float` and why `float` solves it? – Basj Jan 14 '20 at 11:23

nonopolarity · Accepted Answer · 2020-01-14T11:50:38.760

Simply add to .wrapper

line-height: 25px;

and

.wrapper * {
  vertical-align: middle;
}

.wrapper {
  height: 25px;
  line-height: 25px;
}

.wrapper * {
  vertical-align: middle;
}

.myinput {
  box-sizing: border-box;
  width: 150px;
  height: 100%;
}

.mybutton {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 0.5em;
  background-color: #57A3E7;
  color: white;
}

<div class="wrapper">
  <input class="myinput" placeholder="hello@example.com" type="email">
  <div class="mybutton">Go!</div>
</div>

To see how they are vertical aligned in more extreme cases:

.wrapper {
  height: 125px;
  line-height: 125px;
}

.wrapper * {
  vertical-align: middle;
}

.myinput {
  box-sizing: border-box;
  width: 150px;
  height: 22px;
}

.mybutton {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 0.5em;
  background-color: #57A3E7;
  color: white;
}

<div class="wrapper">
  <input class="myinput" placeholder="hello@example.com" type="email">
  <div class="mybutton">Go!</div>
</div>

Or

.wrapper {
  height: 125px;
  line-height: 125px;
}

.wrapper * {
  vertical-align: middle;
}

.myinput {
  box-sizing: border-box;
  width: 150px;
  height: 100%;
}

.mybutton {
  display: inline-block;
  box-sizing: border-box;
  padding: 0 0.5em;
  background-color: #57A3E7;
  color: white;
  font-size: 96px;
}

<div class="wrapper">
  <input class="myinput" placeholder="hello@example.com" type="email">
  <div class="mybutton">Go!</div>
</div>

Without the vertical-align: middle;, the third example will not be aligned.

Alisson R. Galindo · Answer 3 · 2020-01-14T12:00:45.550

0

Try this:

    .wrapper {
      height: 25px;
    }
    .myinput {
      box-sizing: border-box;
      width: 150px;
      height: 100%;
    }
    .mybutton {
      display: inline-block;
      box-sizing: border-box;  
      height: 24px;
      padding: 3px 10px;
      background-color: #57A3E7;
      color: white;
    }

    <div class="wrapper">
      <input class="myinput" placeholder="hello@example.com" type="email"> 
      <div class="mybutton">Go!</div>
    </div>

edited Jan 14 '20 at 12:00

answered Jan 14 '20 at 11:34

Alisson R. Galindo

50
2

Thank you for your answer! Can you turn it into a runnable snippet? (it would be much easier to test it), you can edit to do this. – Basj Jan 14 '20 at 11:37
Oh Sorry, updated now ;) – Alisson R. Galindo Jan 14 '20 at 12:01

score 0 · Answer 4 · answered Jan 14 '20 at 11:46

Just add display: inline-block; and vertical-align: middle; for both the input and the button.

This method does vertically align any element within the regular position system (understand, not floating or anything).

It just requires

A common parent container to the vertically aligned items
The position set to inline-block and a vertical alignment set to middle for every child

.wrapper {
  height: 25px;
}
.myinput {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  width: 150px;
  height: 100%;
}
.mybutton {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;  
  height: 100%;
  padding: 2px 10px;
  background-color: #57A3E7;
  color: white;
}

<div class="wrapper">
  <input class="myinput" placeholder="hello@example.com" type="email">
  <div class="mybutton">Go!</div>
</div>

volt · Answer 5 · 2020-01-14T12:05:23.143

0

but without using flex, etc.?

Why?

CSS flex works great for this because it defaults to align-items: stretch which means the items will automatically adjust to 100% of their parent's height and you won't need to hardcode any pixel values for vertical alignment.

I'm also not sure why you're using a div as a button. If possible consider changing that to a button element because that's what it was designed for.

.wrapper {
  display: flex;
  height: 25px;
  width: 150px;
}

.mybutton {
  background-color: #57A3E7;
  color: white;
  border: none;
  margin-left: 0.5em;
}

<div class="wrapper">
  <input class="myinput" placeholder="hello@example.com" type="email">
  <button class="mybutton">Go!</button>
</div>

edited Jan 14 '20 at 12:05

answered Jan 14 '20 at 11:53

volt

963
8
17

Indeed. Could OP elaborate on why flexbox would not be the most viable option? @basj – Thijmen Jan 14 '20 at 12:40
@volt `flex` is a relatively new addition (even if it's years ago), and since what I'm describing is really really really basic, I was curious about how to do it with even the oldest good methods. – Basj Jan 14 '20 at 14:09
@basj no it's not. All modern browsers + IE11 support post-2012 flex syntax - which is what this answer uses. If IE < 11 was a concern, then that should have been stated in the question. Also note that out of all the answers to your question, this one has the least amount of code. – volt Jan 14 '20 at 14:16

How to vertically align this input and button that are on the same line?

5 Answers5