Use 'vertical-align: middle;' do not work for me in CSS

Question

I have two view in a super view, the code is below:

<view class="search">
<view class="section">
    <input id="input-word" placeholder="请输入您要查询的文本" focus/>
    <navigator id="cancel-button" class="navigator" url="../../index">取消</navigator>
    </view>
</view>

Before asking the question, I searched the SO, find :

'vertical-align: middle' does not work

But I set the line-height equals to super view's heihgt, only one view(cancel-button) work, the other did not work.

The picture is below:

The css code:

#input-word {
  display:inline-block;
  vertical-align: middle;
  float:left;
  text-align:left;
  line-height:90rpx;
}

#cancel-button {
  display:inline-block;
  width:120rpx;
  float:right;
  text-color:#ffffff;
  vertical-align: middle;
  line-height:90rpx;
}

Where is the issue? I think the code is no problem.

---

Edit - 1

#input-word {
  display:inline-flex;
  vertical-align: middle;
  float:left;
  text-align:left;
  align-items: baseline;
  line-height:90rpx;
}

The input css I tested this, but not work.

Answer 1

Update:

.section {
    display:flex;
    align-items: center;
    justify-content: space-between;
}

---

Origin

Just Use following CSS

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