Выравнивание <p>в div

Question

У меня есть следующий div и параграфы:

<div id="container">
                <p class="jsavoutput jsavscroll" readonly="readonly" style="width:225px; height:400px"> </p>
                <p id="title" style="text-align: center; verticle-align:text-top" > Title </p>
</div>​

Запустив это на jsfiddle, вы можете увидеть, что «заголовок» появляется внизу, если только первый <p> не удален. Это почему? Как я могу получить первый абзац, а также выровнять второй по верхней середине?

Answer 1

Как сказал Андрей Дрынов, поскольку <p> является блочным элементом, он появляется под первым.

Чтобы поместить второй абзац в соответствие с первым, можно добавить display: inline-block к обоим <p>элементы.

Демонстрация: http://jsfiddle.net/AKaHN/

Answer 2

Поскольку вы даете первому тегу <p> высоту 400 пикселей.Заголовок на самом деле не появляется внизу, он просто появляется под первым тегом, который занимает 400 пикселей по вертикали.

Если вы хотите, чтобы они появлялись рядом друг с другом, вы можете изменить <p>теги для <span> s или для тега <p> стиль встраивания (или встроенный блок): <p style="display: inline">Something here</p>

<div id="container" style="text-align: center;">
     <span class="jsavoutput jsavscroll" readonly="readonly" style="width:225px; height:400px"> Test </span>
     <span id="title" style="text-align: center;"> Title </span>
</div>​​​​​​​​​​​​​​​​​​​​​​​

ИЛИ

<div id="container">
     <p class="jsavoutput jsavscroll" readonly="readonly" style="width:225px; height:400px"> Test </p>
     <p id="title" style="text-align: center; margin-top: -400px;"> Title </p>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Вы можете настроитьзначение margin-top для перемещения второго абзаца вверх или вниз, в зависимости от того, где вы хотите.

Answer 3

<p> является блочным элементом, поэтому, естественно, второй абзац находится ниже.Добавьте background-color к обоим, чтобы увидеть их.

Вы хотите, чтобы они были рядом?Тогда используйте float:left