html div頂部和底部的文字

Question

我需要創建一個高度爲200px的<div>，其頂部和底部都有一些文字。這需要在所有主流瀏覽器中運行。我嘗試過各種組合的對齊/垂直對齊，但沒有運氣。

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>之內的各自獨立的元素。

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

顯然，你可能會需要其他樣式將它添加到：如

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

然後你就可以使用CSS定位在主div的頂部和底部的兩個內部的div他們的風格適合你的佈局，但這應該讓你開始。