arii arii - 1 month ago 7
HTML Question

button in the same height with text

I want to add 2 buttons at the same height of the text or in the middle, but what I get is:

enter image description here

How can I do it?
the code:

<h3 style="float:left;">Change Ambient Light:&nbsp;</h3>
<button style="float:left;" type="button" onclick="changeAmbientLight('up')">+</button>
<button style="float:left;" type="button" onclick="changeAmbientLight('down')">-</button>
<br style="clear:both" />

Answer

Change the floats to display: inline-block and add vertical-align: middle

h3, button {
  display: inline-block;
  vertical-align: middle;
}

Remove float: left