使用‘垂直对齐:中间；’在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，发现：

“垂直对齐:中间”不起作用

但我将line-height设置为超级视图的高性能，只有一个视图(取消按钮)工作，另一个视图无效。

情况如下：

​

​

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

点击这里查看Demo