CODEWITHSUNDEEP
htmlcss
Zach Gates
Zach Gates

Reputation: 4155

How can I align these divs with inline-block?

I have two divs with text, but one should be aligned to the top left, and the other should be centered, but not on the same line as the first.

Like this:

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

This is my current code:

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

divs

How can I fix this?

Upvotes: 0

Views: 51

Answers (2)

Brian
Brian

Reputation: 87

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

This should get you on the right track; with a few adjustments. Look at some of the differences and that should help.

Upvotes: 2

jmore009
jmore009

Reputation: 12933

You don't need to do set the divs to inline-block. You really dont have to do anything more than text-align: center on the second 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

Upvotes: 3

Related Questions