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

Question

好，目前我得到这个代码：

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

这只是所有代码的一部分，但所有的作品，除了按键+输入接口良好。

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

Answer 1

使用

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>

反正我建议你在一个容器

包装这三个对象

Answer 2

我已将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>