将Button和Text放在同一行上，并将文本作为Button的中心 [英] Give Button and Text on the same line and text to be center of 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的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！