相关疑难解决方法(0)

直播页面在这里.

鉴于此HTML页面:

section[role=main] {
  margin: 1em;
  width: 95%;
  border: 1px solid #999;
}

section[role=main] article {
  width: 40%;
  height: 180px;
  margin: 1em;
  display: inline-block;
  border: 1px solid black;
}

<section role="main">
  <article>Java</article>
  <article></article>
</section>

<section role="main">
  <article>Java</article>
  <article>JavaScript</article>
</section>

我希望我的两篇文章都是一致的,但正如我在下面的截图中看到的那样,只有当我的两篇文章都有文本时,这些<article>元素才是中心对齐的:

是什么导致了这种行为,以及如何解决？

我需要有 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: …