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.

You could start by writing valid HTML: https://validator.w3.org/nu/ — Quentin, Jan 17 '17 at 08:11
@Rahul Chadrasekharan, what mean of assigning `width` to `#input-word` ? do you mean set width to 120 rpx too? I tested this ,but no use. — aircraft, Jan 17 '17 at 08:17

score 1 · Accepted Answer · edited Jan 17 '17 at 08:34

1

Update:

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

Origin

Just Use following CSS

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

edited Jan 17 '17 at 08:34

aircraft

25,146
28
91
166

answered Jan 17 '17 at 08:25

Super User

9,448
3
31
47

yeah ,great, works, but the `cancel-button` do not float right now it stick left to the `input-word` now, how to avoid it ? – aircraft Jan 17 '17 at 08:28
You can use `justify-content: space-between;` for this – Super User Jan 17 '17 at 08:31

score 0 · Answer 2 · edited Jan 17 '17 at 08:27

0

Use inline-flex, like in this example:

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

edited Jan 17 '17 at 08:27

Alex

9,313
1
39
44

answered Jan 17 '17 at 08:15

Takács Botond

136
10

Botond, I tested this, my first view is a input, look at my edit-1 – aircraft Jan 17 '17 at 08:21

score 0 · Answer 3 · answered Jan 17 '17 at 08:22

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

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

3 Answers3