html div顶部和底部的文字

问题描述：

我需要创建一个高度为200px的<div>，其顶部和底部都有一些文字。这需要在所有主流浏览器中运行。我尝试过各种组合的对齐/垂直对齐，但没有运气。html div顶部和底部的文字

非常顶部和非常底部是什么？ – 2010-09-28 11:58:44

div..so里面有文本对齐在最顶部和文本对齐在最底部 – aeq 2010-09-28 12:01:03

答

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

答

你不能用一个单独的文本块来做到这一点，因为你正在谈论两个不同的样式位置（即一位到顶部，一位到底部），所以你需要把将两位文字分成主要的<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他们的风格适合你的布局，但这应该让你开始。

html div顶部和底部的文字

相关推荐