html - 如何将这些 div 与 inline-block 对齐？

Question

我有两个带有文本的 div，但一个应该与左上角对齐，另一个应该居中，但不与第一个在同一行。

像这样:

----------------------------------------------
|Backstage
|Issue 4
|
|                 New Fish Species
|              Migrating To The Town
|

这是我当前的代码:

<div style="display:inline-block; width:565px; text-align:center;">
    <div align="left" style="display:inline-block; vertical-align:top;">
        <strong>
            <h3 style="margin:0px;">BACKSTAGE</h3>
            <h5 style="margin:0px;">Issue 4, June 16, 2003</h5>
        </strong>
    </div>
    <div style="display:inline-block; vertical-align:top; position:absolute;">
        <strong>
            <h1 style="margin:0px;">New Fish Species</h1>
            <h1 style="margin:0px;">Migrating To The Town</h1>
        </strong>
    </div>
</div>

我该如何解决这个问题？

Answer 1

您不需要将 div 设置为 inline-block。除了在第二个 div

上执行 text-align: center 之外，您真的不需要做任何事情

<div style="width:565px;">
  <div>
    <strong>
        <h3 style="margin:0px;">BACKSTAGE</h3>
        <h5 style="margin:0px;">Issue 4, June 16, 2003</h5>
    </strong>
  </div>
  <div style="text-align:center;margin: 20px 0 0;">
    <strong>
        <h1 style="margin:0px;">New Fish Species</h1>
        <h1 style="margin:0px;">Migrating To The Town</h1>
    </strong>
  </div>
</div>

FIDDLE