2015-01-02 4 views
0

У меня есть два div с текстом, но один должен быть выровнен в левом верхнем углу, а другой должен быть центрирован, но не на той же строке, что и первый.Как я могу выровнять эти 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> 

divs

Как я могу это исправить?

+0

вы можете это еще объяснить? 'нужно выровнять в верхнем левом углу, а в другом - в центре, но не в той же строке, что и первая. И что вы имеете в виду не по той же линии, что и первая? – jmore009

+0

Добавлено edit @ jmore009 –

+0

Спасибо, я отправил вам ответ – jmore009

ответ

3

Вам не нужно устанавливать divs в 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

+0

Ницца, простое решение. – Brian

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> 

Это должно привести вас к правильному пути; с несколькими настройками. Посмотрите на некоторые различия, и это должно помочь.

Смежные вопросы