将按钮和文本放在同一行，文本位于按钮中心

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>

我希望按钮和文本框位于我得到的同一行，但我没有让文本成为按钮的中心。我得到这个输出。我希望“此处查找位置”成为按钮的中心。

谢谢你。任何帮助将不胜感激。

原文由 Bhavin Shah 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Jinu Kurian 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你给了 margin-top:1.5%;输入和 margin-top:10px 标签，你应该为两者使用相同的边距值

 input{
  float:left;
  width: 45px;
  margin-top:10px;
  height: 20px;
  text-align: center;
  color: white;
  background: #23b7e5;
  font-size: 13px;
  border-color: #23b7e5;
  border-radius:2px;
  padding: 0px;
  }
.control-label{
  float:left;
  border: thin red solid;
  margin-top: 10px;
}

 <input type="button" class="click" id="click" value="Click" style="">

    <label class="control-label" style="">Here to find location</label>

原文由 Head In Cloud 发布，翻译遵循 CC BY-SA 3.0 许可协议