センタリング入力

<form class="form-horizontal"> 
    <div class="form-group orange-container"> 

    <div class="col-sm-4"> 
     <h4 class="black-container"> Title </h4> 
     <div class="black-container2"> What do you want to raise money for? </div> 
    </div> 

    <div class="col-sm-8 blue-container2"> 
     <input type="email" class="form-control black-container3" id="email" placeholder="Enter email"> 
    </div> 
</div>

センタリング入力

いずれも100％の幅と80pxの高さを有するオレンジ容器以外の任意のフォーマットを有していません。私は縦に青いコンテナ2の中に入力を取得することはできません垂直の揃えを使用して試してみました：真ん中と表示：青いコンテナにテーブルのセルは効果がありません。

出典

2017-01-30 Aymen Rizwan

「私は青にcontainer2の内側に垂直センターへの入力を取得傾ける」あなたは何を意味するのですか？それは高さが 'auto'なので、内部の入力よりも背が高くないので、入力をどのように垂直に整列させますか？そのdivは、入力のための入力よりも高くなければならないので、垂直方向に配置するスペースもあります。 –

@MichaelCokerは言及するのを忘れましたが、blue-container2の高さは親の100％であり、入力は100％ではありません –

これは、質問をする際にすべての関連コードを含める理由の1つです。理想的には、[最小で完全で検証可能な例]（http://stackoverflow.com/help/mcve）を作成する必要があります。 –

フレックスボックスレイアウトを使用します。

.vertical-align { 
    display: flex; 
    flex-direction: row; 
} 

.vertical-align > .col-sm-8, 
.vertical-align > .col-sm-8 { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

アクションでそれを参照してください：https://jsfiddle.net/pcxdek1t/

出典

2017-01-30 18:19:34

ブートストラップを使用すると、以下のようにして適用することができ、 "テキスト・センター" クラスを提供：、利用フレキシボックス場合

<div class="col-sm-4 text-center">

http://getbootstrap.com/css/#type-alignment

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<form class="form-horizontal"> 
 
    <div class="form-group orange-container"> 
 

 
    <div class="col-sm-4 text-center"> 
 
     <h4 class="black-container"> Title </h4> 
 
     <div class="black-container2"> What do you want to raise money for? </div> 
 
    </div> 
 

 
    <div class="col-sm-8 blue-container2"> 
 
     <input type="email" class="form-control black-container3" id="email" placeholder="Enter email"> 
 
    </div> 
 
     
 
    </div> 
 
    </form>

出典

2017-01-30 18:03:53

.orange-container { 
    display: flex; 
    align-items: center; 
}

をあなたはBootstrap3を使用します

出典

2017-01-30 18:10:07 grinmax

答えて

関連する問題