如何对齐两个按钮和一个输入类型范围？

Question

好吧，目前我得到了这段代码：

<button onclick="zoomOut()">-</button>
<input id='zoom' type='range' value='10' min='0' max='20'></input>
<button onclick="zoomIn()">+</button>

这只是所有代码的一部分，但除了按钮+输入界面外，一切正常。

因为你可以看到它们不在常规线上，我想把按钮放一点位置或者输入一点位置，但是在尝试修改我所知道的所有属性之后，没有什么可行的，一些想法？

Answer 1

我已将vertical-align属性添加到zoom并为其指定了值middle.

#zoom{
  vertical-align:middle;
}

<button onclick="zoomOut()">-</button>
<input id='zoom' type='range' value='10' min='0' max='20'/>
<button onclick="zoomIn()">+</button>

Answer 2

使用

vertical-align: middle;

对于您需要对齐的每个对象，在这种情况下：

body > *{
vertical-align: middle;
}

<button onclick="zoomOut()">-</button>
<input id='zoom' type='range' value='10' min='0' max='20'></input>
<button onclick="zoomIn()">+</button>

无论如何，我建议你将这三个对象包装在容器中