实时页面 在这里。

鉴于此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>元素才会居中对齐

任何想法导致此行为的原因以及如何解决？