使用＆＃39; vertical-align：middle;＆＃39;在CSS中不适合我

Question

我在超级视图中有两个视图，代码如下：

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

在提出问题之前，我搜索了SO，找到了：

'vertical-align: middle' does not work

但是我将line-height等于超级视图的heihgt，只有一个视图（取消按钮）工作，另一个不起作用。

图片如下：

css代码：

#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;
}

问题出在哪里？我认为代码没问题。

修改 - 1

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

输入css我测试了这个，但没有用。

Answer 1

<强>更新：

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

<强>来源

只需使用以下CSS

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

Answer 2

使用inline-flex，如下例所示：

<div style="display: inline-flex;align-items: baseline;">
    <h4>This is a simple text </h4>
    <h1>Another simple text</h1>
</div>

Answer 3

Try this

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

<强>的CSS

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

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

Click here to see Demo