顯示行內塊將我的文本向上和向下推動。

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更改爲類。