html div с текстом сверху и снизу

Question

Мне нужно создать <div> высотой 200 пикселей, которая имеет некоторый текст на самом верху и самом дне. Это должно работать во всех основных браузерах. Я пробовал различные комбинации выравнивания/выравнивания по вертикали без везения.

Answer 1

Использование двух пролетов (или любой другой) внутри DIV:

<div> 
    <span id="top">Text at top</span> 
    <span id="bottom">Text at bottom</span> 
</div> 

Затем дают divposition: relative; и расположить пролеты абсолютно:

div { 
    position: relative; 
    height: 200px; 
} 

span { 
    position: absolute; 
} 

span#top { 
    top: 0; 
} 

span#bottom { 
    bottom: 0; 
} 

Живой пример:

http://jsbin.com/ucowi3

Answer 2

Вы не можете сделать это с помощью одного блока текста, так как вы говорите о двух отдельных битах стилизации (то есть один бит вверх и один бит внизу), так что вам нужно будет поставить два бита текста в свои отдельные элементы в основном <div>. например

<div class='maindiv'> 
    <div class='topofmaindiv'>This goes at the top</div> 
    <div class='bottomofmaindiv'>This goes at the bottom</div> 
</div> 

Затем вы можете укладывать их с помощью CSS, чтобы расположить два внутренних дивы в верхней и нижней части главного DIV:

.maindiv { 
    height:200px; 
} 
.topofmaindiv { 
    position: relative; 
    top:0px; 
} 
.bottomofmaindiv { 
    position: relative; 
    bottom:0px; 
} 

Очевидно, что вы, вероятно, нужно добавить другие стили к тому, чтобы подходит для вашего макета, но это должно вас начать.