2つの要素の間に垂直に配置できません

Question

2つのテキスト要素の間にボタンを垂直方向に配置しようとしています divの高さを同じに設定し、内側のdivにvertical-align: middle;を正しく配置できません。

はあなたが役立つことを願って、ここに私のコードは次のとおりです。あなたがこれを達成するためにflexboxを使用することができます

#in { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 200px; 
 
} 
 

 
#out { 
 
    height: 200px; 
 
}

<div id="out"> 
 
    <textarea rows="10" cols="40"></textarea> 
 
    <div id="in"> 
 
    <input type="button" value="switch"> 
 
    </div> 
 
    <textarea rows="10" cols="40"></textarea> 
 
</div>

Answer 1

。 vertical-align: middleを使用すると、インライン要素にのみ影響します。

プレゼンテーションのために完全に必要な場合はレイアウトの配置ではなく、要素の高さを使用するよう常に努力する必要があります。

#in { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
#out { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    -ms-flex-line-pack: center; 
 
     align-content: center; 
 
    -webkit-box-pack: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    height: 200px; 
 
}

<div id="out"> 
 
    <textarea rows="10" cols="40"></textarea> 
 
    <div id="in"> 
 
    <input type="button" value="switch"> 
 
    </div> 
 
    <textarea rows="10" cols="40"></textarea> 
 
</div>