インラインブロックを表示すると、テキストが上下にプッシュされます。

Question

クリック可能なボタンとして6つの相対的な位置のdivを持つ必要があります.3つ上と特定のテキスト内の3つの下にあります。問題は - 私は2または3の長い言葉（彼らは長い幅を取る）を書くとき、いくつかのボタンが上下に行く。私はこれが "display：inline-block"の問題であることを知っています。

HTML

<div class="Box_parent"> 
<a><div id="Box_button"> <div class="box_text"> TEST </div> </div></a> 
<a><div id="Box_button"> <div class="box_text"> TEST </div> </div></a> 
<a><div id="Box_button"> <div class="box_text"> REALLY REALLY REALLY LONG TEST </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text"> TEST </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text"> REALLY REALLY REALLY LONG TEST </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text"> TEST </div> </div> </a> 
</div> 

CSS

#Box_button{ 
height:300px; 
width:300px; 
background-color:#4286f4; 
margin:15px 15px; 
display: inline-block; 
} 

.box_text{ 
font-family:Arial; 
color:white; 
font-size:30px; 
} 

.Box_parent{ 
position:relative; 
text-align:center; 
max-width:1300px; 
margin:auto; 
margin-top:130px; 
vertical-align: bottom; 
} 

Answer 1

インラインブロックである要素に垂直整列を追加。

#Box_button{ 
height:300px; 
width:300px; 
background-color:#4286f4; 
margin:15px 15px; 
display: inline-block; 
vertical-align: middle; 
} 

サイドページでは、idはページ上で一意である必要があります。 box_buttonをクラスに変更することができます。