Wie zwei Tasten und ein Eingabebereich ausrichten?

Question

gut, momentan habe ich diesen Code:

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

dies ist nur ein Teil des gesamten Codes, aber alles funktioniert gut, außer Taste + Eingabe-Schnittstelle.

wie Sie sehen können, sind sie nicht in einer regelmäßigen Linie, ich möchte Knopf ein wenig nach oben Position nehmen oder ein wenig nach unten Position eingeben, aber nach versuchen, alle proprietties zu ändern, weiß ich, nichts funktioniert richtig, einige Ideen?

Answer 1

Verwendung

vertical-align: middle; 

für jedes Objekt, das Sie ausrichten müssen, in diesem Fall:

body > *{ 
 
vertical-align: middle; 
 
}

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

sowieso Ich schlage vor, Sie diese drei Objekte in einem Behälter zu wickeln

Answer 2

Ich habe diehinzugefügtEigenschaft zoom und den Wert middle.

#zoom{ 
 
    vertical-align:middle; 
 
}

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