显示内联块将我的文本上下推动。

Question

我需要有 6 个相对位置的 div 作为可点击的按钮，其中 3 个向上，3 个向下，里面有特定的文本。问题是 - 当我写 2 或 3 个长单词（它们需要很长的宽度）时，一些按钮会向上或向下移动。我知道这是“display:inline-block”的问题。

超文本标记语言

<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

为 inline-block 元素添加垂直对齐。

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

顺便说一句，id 在页面上应该是唯一的。您可能想要将 box_button 更改为一个类。