Warum werden meine Inline-Block-Divs nicht ausgerichtet, wenn nur einer von ihnen Text enthält? [Duplikat]

Question

Nov 25, 2012, 05:08 AM

Warum werden meine Inline-Block-Divs nicht ausgerichtet, wenn nur einer von ihnen Text enthält? [Duplikat]

Diese Frage hat hier bereits eine Antwort:

Warum wird dieses Inline-Block-Element nach unten gedrückt? 8 Antworten

Live-SeiteHier.

Angesichts dieser HTML-Seite:

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>

Ich erwarte, dass meine beiden Artikel ausgerichtet sind, aber wie im folgenden Screenshot zu sehen ist, nur, wenn meine beiden Artikel den Text haben<article> Elemente sind mittig ausgerichtet:

Irgendwelche Ideen, was dieses Verhalten verursacht und wie es behoben werden kann?