Html 将 Button 和 Text 放在同一行上，并将文本作为按钮的中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38889121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Give Button and Text on the same line and text to be center of button
提问by Bhavin Shah
<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>
I want button and text box in the same line which i got but i am not getting text to be center of button. I get this output. I want "Here to find location" to be center of button.
我想要按钮和文本框在我得到的同一行，但我没有让文本成为按钮的中心。我得到这个输出。我希望“在这里找到位置”成为按钮的中心。
Thank You. Any help would be grateful.
谢谢你。任何帮助将不胜感激。
回答by Jinu Kurian
display: inline-blockand vertical-align:middlewill do the trick.
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>回答by Samudrala Ramu
Try It Once
尝试一次
<button>Click</button><input type="text" value =" Here The Location"/>回答by Head In Cloud
You have given margin-top:1.5%; to input and margin-top:10px to label, you should use same margin value for both
你给了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>