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

我希望按钮和文本框在我得到的同一行，但我没有让文本成为按钮的中心。我得到了这个输出。我想＆＃34;在这里寻找位置＆＃34;成为按钮的中心。

谢谢。 任何帮助都会很感激。

Answer 1

display: inline-block和vertical-align:middle可以解决问题。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试一次

＆＃13;

＆＃13;

<button>Click</button><input type="text" value =" Here The Location"/>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您已获得保证金最高限额：1.5％;输入和margin-top：10px到标签，你应该使用相同的保证金值

＆＃13;

＆＃13;

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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;