同じ行とテキストのボタンとテキストをボタンの中心にする

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> 

私は同じ行にボタンとテキストボックスを入れたいのですが、テキストをボタンの中心にしたいのですが。私はこの出力を得る。私は、 "ここで場所を見つける"ボタンの中心にしたい。

ありがとうございます。 ご協力いただければ幸いです。

Answer 1

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>

Answer 2

Answer 3

あなたはマージントップ与えた：1.5％;入力およびマージントップへ：ラベル付けの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>