顶部和底部有文本的html div

Question

我需要创建一个高度为200px的<div>，其顶部和底部都有一些文字。这需要适用于所有主流浏览器。我已经尝试了各种对齐/垂直对齐组合而没有运气。

Answer 1

在div中使用两个跨度（或其他）：

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

然后给div position: 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放在主div的顶部和底部：

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

显然，您可能需要添加其他样式以适合您的布局，但这应该可以帮助您入门。