将Button和Text放在同一行,将文本作为按钮的中心

Question

<input type="button" class="click" id="click" value="Click" style="width: 45px; margin-top: 1.5%; height: 20px; text-align: center; color: white; background: #23b7e5; font-size: 13px; border-color: #23b7e5; border-radius:2px; padding: 0px; "> 

    <label class="control-label" style="border: thin red solid; margin-top: 10px;">Here to find location</label>

我希望按钮和文本框在我得到的同一行,但我不是让文本成为按钮的中心.我得到了这个输出.我希望"这里找到位置"是按钮的中心.

谢谢.任何帮助将不胜感激.

Answer 1

display: inline-block和vertical-align:middle会做的伎俩.

input, label{
  display: inline-block;
  vertical-align: middle;
  margin: 10px 0;
}

<input type="button" class="click" id="click" value="Click" style="width: 45px; height: 20px; text-align: center; color: white; background: #23b7e5; font-size: 13px; border-color: #23b7e5; border-radius:2px; padding: 0px; "> 

    <label class="control-label" style="border: thin red solid;">Here to find location</label>