センターと垂直ブートストラップ

Question

に入力フィールドを揃えるIは、入力フィールドのセットを持っています。これを修正するには？

Answer 1

、それは実際に問題を引き起こして、あなたのイメージです。 vertical-align:middle;を追加すると残りの部分が中央に出ます。 Demo。

Answer 2

代わりにPのdivの内側にこれを入れてみてください。あなたが提供する最小限のコードについては

<div class="vcenter"> 
<input type="image" src="images/text_to_speech.svg" alt="Speak This" width="48" height="48" id="say_button"></input> 

     <input type="text" value="" class="input-lg" id="say_utterance" placeholder="Enter text to speak..."></input> 

     <span id="say_remaining"></span> 
</div> 

スタイル

.vcenter { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 

Answer 3

なぜブートストラップを使用しないのですか？ここで

は、ブートストラップはあなたにそれを行うには、フォームのためのいくつかのツール/入力クラスを与える方法の平野例です。

<div class="row"> 
    <div class="col-lg-6"> 
     <div class="input-group"> 
      <span class="input-group-addon"> 
       <input type="checkbox" aria-label="..."> 
      </span> 
      <input type="text" class="form-control" aria-label="..."> 
     </div><!-- /input-group --> 
    </div><!-- /.col-lg-6 --> 
    <div class="col-lg-6"> 
     <div class="input-group"> 
      <span class="input-group-addon"> 
       <input type="radio" aria-label="..."> 
      </span> 
      <input type="text" class="form-control" aria-label="..."> 
     </div><!-- /input-group --> 
    </div><!-- /.col-lg-6 --> 
</div><!-- /.row --> 

あなたが行にあなたの入力フィールドをラップする必要があり、その後のためにcol-lg-6を経由して2列を作成します2コンテナであり、合計12列であり、両方の入力フィールドに等間隔または垂直方向のライン間隔を与えます。

はクラスinput-group