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

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>

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.

share button code too.. – Gaurav Aggarwal Aug 11 '16 at 06:47 — Gaurav Aggarwal, Aug 11 '16 at 06:47
I have updated the question. in that there is a button code – Bhavin Shah Aug 11 '16 at 06:49 — Bhavin Shah, Aug 11 '16 at 06:49

score 12 · Accepted Answer · answered Aug 11 '16 at 06:50

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>

score 0 · Answer 2 · answered Aug 11 '16 at 06:50

0

Try It Once

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

answered Aug 11 '16 at 06:50

Samudrala Ramu

2,088
1
15
36

I don't want textbox. – Bhavin Shah Aug 11 '16 at 06:56

score 0 · Answer 3 · answered Aug 11 '16 at 07:10

You have given margin-top:1.5%; to input and margin-top:10px to label, you should use same margin value for both

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>

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

3 Answers3

Linked