Can't center vertically between 2 elements

Question

I'm trying to center vertically a button between 2 textarea elements, I put the divs height the same and and the vertical-align: middle; for the inner div and it doesn't work properly.

Hope you can help, here is my code:

#in {
  display: inline-block;
  vertical-align: middle;
  height: 200px;
}

#out {
  height: 200px;
}

<div id="out">
  <textarea rows="10" cols="40"></textarea>
  <div id="in">
    <input type="button" value="switch">
  </div>
  <textarea rows="10" cols="40"></textarea>
</div>

This question has been asked many times before. See for example: http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div — Marijke Luttekes, May 11 '17 at 13:46
There are hundreds of similar questions about how to vertical align - a simple search in google brings up many answers. Please do a bit of searching / research before posting a question — Pete, May 11 '17 at 13:46
@Pete - be careful. Vertical alignment involving textarea elements is not consistent between browsers. General solutions may not work well. — Alohci, May 11 '17 at 15:39
@Alohci many of the answers include a flexbox version of vertically aligning, I guess if it is good enough to be the accepted answer then it is good enough to be a duplicate, the only care that needs to be taken here is for the OP to do an actual bit of research before posting a question that has been asked a million times. Besides the question is asking how to vertically align a button between 2 textareas, not how to vertically align a textarea. Perhaps you should be more careful when reading the question — Pete, May 12 '17 at 07:47
@Pete. That's not how vertical-align works. You don't vertical-align elements individually, you vertically align all the elements in the line box *with each other*. I agree that some vertical *centering* options work reliably, including flexbox. I was just making the point that the choice is more limited than is generally the case. — Alohci, May 12 '17 at 09:12

score 1 · Accepted Answer · answered May 11 '17 at 13:45

You can use flexbox to achieve this. Using vertical-align: middle will only affect inline elements.

You must always strive to use heights for elements if it is completely necessary for presentation, not layout alignment.

#in {
  display: inline-block;
  vertical-align: middle;
}

#out {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 200px;
}

<div id="out">
  <textarea rows="10" cols="40"></textarea>
  <div id="in">
    <input type="button" value="switch">
  </div>
  <textarea rows="10" cols="40"></textarea>
</div>

Can't center vertically between 2 elements

1 Answers1