CSS 在一个大的DIV里面，另一个DIV怎么居中并置底。
kuaidi.ping-jia.net 作者：佚名 更新日期：2024-07-31
CSS如何把DIV永远置于页面的底部
<body style="margin:0px auto;;padding:0px;">
<div style="float:left;height:80px;width:100%;background: url('../images/0_2.gif');">
<div style="float:left;height:80px;width:348px;background: url('../images/0_1.gif');"></div>
<div style="float:right;height:80px;width:133px;background: url('../images/0_3.gif');"></div>
</div>
<div style="text-align:centr; width:auto; margin-left:40%"> 就是这个DIV怎么居中并置底！</div>
</body>
大概了解你意思，很简单，
<body style="margin:0px;">
<div style="float: left;height:80px;width:100%;background: url('../images/0_2.gif');">
<div style="float: left;height:80px;width:348px;background: url('../images/0_1.gif');"></div>
<div style="float:inherit; float: left; height:20px; line-height:20px; padding-top:60px;"> 就是这个DIV怎么居中并置底！</div>
<div style="float: right;height:80px;width:133px;background: url('../images/0_3.gif');"></div>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* div{ border:1px solid #006600; margin-top:2px; margin-left:2px;}
</style>
</head>
<body>
<div style="height:410px; width:600px;">
<div style="height:300px; width:590px;">
<div style="height:290px; width:290px; float:left;">左</div>
<div style="height:290px; width:290px; float:left;">右</div>
</div>
<div style="height:100px; width:290px; float:left; margin-left:140px;">居中并置底</div>
</div>
</body>
</html>
如果可以，记得给最佳哦
既然相对要相对的话div得设置相对
div.letter-pair {
position:relative;
}
要固定的话就要绝对定位
img.letter {
position:absolute;
bottom:0px;
}
绝对定位position:absolute;不设置相对哪个固定的话是相对body的，所以div定位要设置，由于两个图片都同一个绝对固定，所以是覆盖起来的，要分开要分别是在图片的left
综上就要上面的两个css和图片分别设置style="left:10px"和style="left:30px"，具体数字你自己看着办
使用绝对定位方式可实现这个效果，如下边这个示例：
html代码：
<div class="box">
<div class="demo">这个div要在box中水平居中，垂直居底</div>
</div>
CSS代码：
.con-box{position:relative;width:800px;height:500px;background:#000;}
.demo{position:absolute;width:200px;height:150px;bottom:0;left:50%;margin-left:-100px;}总结一下：
这个例子中 position:absolute;表示定义demo这div绝对定位，bottom:0;定义垂直居底，left:50%;margin-left:-100px;定义水平居中。
<body style="margin:0px auto;;padding:0px;">
<div style="float:left;height:80px;width:100%;background: url('../images/0_2.gif');">
<div style="float:left;height:80px;width:348px;background: url('../images/0_1.gif');"></div>
<div style="float:right;height:80px;width:133px;background: url('../images/0_3.gif');"></div>
</div>
<div style="text-align:centr; width:auto; margin-left:40%"> 就是这个DIV怎么居中并置底！</div>
</body>
大概了解你意思，很简单，
<body style="margin:0px;">
<div style="float: left;height:80px;width:100%;background: url('../images/0_2.gif');">
<div style="float: left;height:80px;width:348px;background: url('../images/0_1.gif');"></div>
<div style="float:inherit; float: left; height:20px; line-height:20px; padding-top:60px;"> 就是这个DIV怎么居中并置底！</div>
<div style="float: right;height:80px;width:133px;background: url('../images/0_3.gif');"></div>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
* div{ border:1px solid #006600; margin-top:2px; margin-left:2px;}
</style>
</head>
<body>
<div style="height:410px; width:600px;">
<div style="height:300px; width:590px;">
<div style="height:290px; width:290px; float:left;">左</div>
<div style="height:290px; width:290px; float:left;">右</div>
</div>
<div style="height:100px; width:290px; float:left; margin-left:140px;">居中并置底</div>
</div>
</body>
</html>
如果可以，记得给最佳哦
