![middle]( "middle")
本文介绍了将Button和Text放在同一行上，并将文本作为Button的中心的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<输入type = button class = click id = click value = Click style = width：45px; margin-top：1.5％; height ：20像素；文本对齐：居中；颜色：白色；背景：＃23b7e5；字体大小：13像素；边框颜色：＃23b7e5；边框半径：2像素；填充：0像素；>
< label class = control-label style = border：浅红色固体； margin-top：10px;>此处找到位置< / label>
我希望按钮和文本框位于同一行，但我无法获取文本按钮的中心。我得到这个输出。我希望在这里找到位置成为按钮的中心。
谢谢。
任何帮助将不胜感激。
解决方案
display：inline-block 和 vertical-align：middle 可以解决问题。
input，label {display：inline-block;垂直对齐：中间；保证金：10px 0;}
< input type =按钮 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：浅红色固体；>这里找到位置< / label>
<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.
解决方案
display: inline-block and vertical-align:middle will do the trick.
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>
这篇关于将Button和Text放在同一行上，并将文本作为Button的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！