如何将这些 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 style="width:1000px; margin: 0 auto;">
    <div align="left" style="display:inline-block; vertical-align:top; text-align:left;">
        <strong>
            <h3 style="margin:0px;">BACKSTAGE</h3>
            <h5 style="margin:0px;">Issue 4, June 16, 2003</h5>
        </strong>
    </div>


    <div style="vertical-align: top; margin: 0 auto; width: 50%; text-align: center;">
        <strong>
            <h1>New Fish Species</h1>
            <h1>Migrating To The Town</h1>
        </strong>
    </div>
</div>

这应该会让您走上正轨；经过一些调整。查看其中的一些差异，这应该有所帮助。

Answer 2

您不需要将 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

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

How can I align these divs with inline-block?

html

css