Give Button and Text on the same line and text to be center of button

38,411

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>

Share:
38,411

Related videos on Youtube

Bhavin Shah
Author by

Bhavin Shah

Front End Developer By Day. Affiliate Marketer &amp; Funnel Builder By Night. Organic Traffic Coach. Less Talks, More Actions.

Updated on August 11, 2020

Comments

  • Bhavin Shah
    Bhavin Shah almost 4 years
    <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.

    • Gaurav Aggarwal
      Gaurav Aggarwal almost 8 years
      share button code too..
    • Bhavin Shah
      Bhavin Shah almost 8 years
      I have updated the question. in that there is a button code
  • Bhavin Shah
    Bhavin Shah almost 8 years
    I don't want textbox.