divを垂直方向に配置する

子要素を垂直に均等に分配するにはどうすればよいですか？たとえば、3つの入力フィールドを持つdivが100％幅に設定されている場合、それらを3行に均等に配分したい、つまり画像のように33.33％高くする必要があります。また、2つのフィールドがある場合は、明示的に設定することなく50％ずつ2行ずつ表示してください。何か案は？divを垂直方向に配置する

現在、私のコードは、下のスニペットのようにすべての入力フィールドを一番上にまとめています。

input { width: 60%;} 
 
.whole-container { height: 300px;background: yellow;}

<body> 
 
    <div class="whole-container"> 
 
    <form id="login-form" method="POST"> 
 
     <input name="name" type="text" placeholder="Your name" id="cf-nameInput"> 
 
     <input name="email" type="email" placeholder="[email protected]" id="cf-emailInput"> 
 
     <input name="tel" type="tel" placeholder="Phone number" id="cf-phoneInput"> 
 
    </form> 
 
    </div> 
 
</body>

出典

2016-06-20 user1038814

回答があれば、あなたの質問に答えてください。それを受け入れて、他の人に役立つようにしてください。 –

あなたはフレックス使用することができます。

input { 
 
    width: 60%; 
 
} 
 

 
.whole-container { 
 
    height: 300px; 
 
    background: yellow; 
 
} 
 

 
.whole-container form { 
 
    height:100%; 
 
    display:flex; 
 
    flex-direction:column; 
 
    justify-content:space-around; 
 
}

<body> 
 
    <div class="whole-container"> 
 
    <form id="login-form" method="POST"> 
 
     <div><input name="name" type="text" placeholder="Your name" id="cf-nameInput"></div> 
 
     <div><input name="email" type="email" placeholder="[email protected]" id="cf-emailInput"></div> 
 
     <div><input name="tel" type="tel" placeholder="Phone number" id="cf-phoneInput"></div> 
 
    </form> 
 
    </div> 
 
</body>

フレックスはあなたを助けることができる

出典

2016-06-20 12:59:46

：

form {height:300px; 
 
    display:flex; 
 
    flex-flow:column; 
 
    justify-content:space-around; 
 
    background:yellow; 
 
    } 
 
input { 
 
width: 60%;}

<div class="whole-container"> 
 
    <form id="login-form" method="POST"> 
 
      <input name="name" type="text" placeholder="Your name" id="cf-nameInput"> 
 
      <input name="email" type="email" placeholder="[email protected]" id="cf-emailInput"> 
 
      <input name="tel" type="tel" placeholder="Phone number" id="cf-phoneInput"> 
 
    </form> 
 
    </div>

出典

2016-06-20 12:59:58

あなたは、次の例確認することができdisplay:flexを使用していないソリューションたい場合：

input { width: 60%;} 
 
#login-form { height:100%; } 
 
.whole-container { display:block; height: 300px;background: yellow;} 
 
.container { min-height:33%; }

<div class="whole-container"> 
 
    <form id="login-form" method="POST"> 
 
      <div class="container"> 
 
      <input name="name" type="text" placeholder="Your name" id="cf-nameInput"> 
 
      </div> 
 
      <div class="container"> 
 
      <input name="email" type="email" placeholder="[email protected]" id="cf-emailInput"> 
 
      </div> 
 
      <div class="container"> 
 
      <input name="tel" type="tel" placeholder="Phone number" id="cf-phoneInput"> 
 
      </div> 
 
    </form> 
 
</div>

基本的にはちょうどdiv内部inputをラップし、その後、必要な入力量に基づいてdivの高さを割り当てます（この場合は33％）

出典

2016-06-20 13:04:21 Signo

これは、最初の入力を上端に置きますが、著者は上端から余白を持つことを望んでいました。私は入力がdiv内でさらに垂直方向にセンタリングされるべきだと思います –

彼は入力cssの位置に追加するなど、いくつかの追加のCSSを使用して入力を配置できます。下：0;下のすべての入力を揃えます。コンテナ内で縦に並べる場合も同じです。例を掲載しました。誰かが古いブラウザをサポートする必要がある場合、flexは動作しません – Signo

divを垂直方向に配置する

答えて

関連する問題