在 CSS 中使用 'vertical-align: middle;' 对我不起作用

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设置为超级视图的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

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

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

Answer 2

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

Answer 3

更新:

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

来源

只需使用以下CSS

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

在 CSS 中使用 'vertical-align: middle;' 对我不起作用

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

html

css

wechat