你说的文字居于底部是指浏览器底部么,如果是的话,需要用到CSS属性position,而position: fixed就是相对于浏览器进行定位的,让后用left, right, bottom, top这些坐标值来进行指定位置,底部就是bottom: 0,所以让文字垂直居底就像下面这个例子一样:
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#footer{
position: fixed
bottom: 0
width: 100%
text-align: center
}
</style>
</head>
<body>
<div id="footer">垂直居于底部的文字</div>
</body>
</html>
这个例子里还假设你是除了需要垂直居底以外,还需要居中设置,因此那个width:100%和text-align: center就是为了居中放置的,这种设置经常用在一个网站用于声明版权、网站地图这些,多看几个这样的网站源代码就会发现,它们都是这么做的。
此外,还有一个position: absolute,生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置还是通过 "left", "top", "right" 以及 "bottom" 属性进行规定。你可以拿它来做到让某个元素处于一个区域比如某个div背景的底部,这时外面套的那个元素不能用默认的positon设定,需改成position: relative。例如:
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
position: relative
width: 400px
height: 300px
margin: 20px auto
background-color: #de5
}
#innerFooter{
position: absolute
bottom: 0
width: 100%
text-align: center
}
</style>
</head>
<body>
<div id="container">
<div id="innerFooter">始终垂直居于块元素底部的文字</div>
</div>
</body>
</html>
使用绝对定位方式可实现这个效果,如下边这个示例:
html代码:
<div class="box"><div class="demo">这个div要在box中水平居中,垂直居底</div>
</div>
CSS代码:
.con-box{position:relativewidth:800pxheight:500pxbackground:#000}.demo{position:absolutewidth:200pxheight:150pxbottom:0left:50%margin-left:-100px}
总结一下:
这个例子中 position:absolute表示定义demo这div绝对定位,bottom:0定义垂直居底,left:50%margin-left:-100px定义水平居中。