如何将这些div与内联块对齐？

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。你真的不需要在第二个text-align: center

上做div以上的任何事情

<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

Answer 2

<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>

这应该让你走上正轨;稍作调整。看一些差异，这应该有所帮助。