css中怎么样才能使内容在div的底部中间
6个回答
展开全部
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {position: relative; width: 200px; height: 80px; border: 1px solid violet;}
span {position: absolute; bottom: 0;left: 80px}
3、浏览器运行index.html页面，此时成功用css实现了内容在div的底部居中。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title></title>
<style>
.nav{
background:blue;
width:800px;
height:50px;
margin:0 auto;
}
.content{
width:100%;
height:50px;
position:fixed;
bottom:0px;
}
</style>
</head>
<body>
<div class="content">
<div class="nav"></div>
</div>
</body>
</html>
我不知道你要的是不是这种效果，这种效果是无论你怎么用下拉，它一直保持在那个位置，就是说它的位置是固定的，但不影响其他网页内容，就想象成是漂浮的。
position:fixed;bottom:0px;意思是，相对于浏览器窗口进行定位，离浏览器底部始终是0px。没有必要的计算。
不知道能不能帮到你。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
内容在底部中间使用绝对定位，这个时候就可以添加bottom等方法实现：
.content{
position: absolute;
bottom: 0;/* 底部距离为0 */
left:0;right:0;/* 距离左右距离相等即可造成居中 */
}如果是整个div永远在页面的最底下，就是用固定定位
.contentBox {
position: fixed;
bottom: 0;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码实现
下面先考虑HTML结构，这个演示页面的HTML代码非常简单。
Html程序代码
<body> <DIVidDIVid="container"> <DIVidDIVid="content"> <h1>Content</h1> <p>请改变浏览器窗口的高度，以观察footer效果。</p> <p>这里是示例文字，DIV固定………，这里是示例文字。</p> </DIV> <DIVidDIVid="footer"> <h1>Footer</h1> </DIV> </DIV> </body>
CSS代码：
程序代码
body,html{ margin:0; padding:0; font:12px/1.5arial; height:100%; } #container{ min-height:100%; position:relative; } #content{ padding:10px; padding-bottom:60px; /*20px(font-size)x2(line-height)+10px(padding)x2=60px*/ } #footer{ position:absolute; bottom:0; padding:10px0; background-color:#AAA; width:100%; } #footerh1{ font:20px/2Arial; margin:0; padding:010px; }
下面先考虑HTML结构，这个演示页面的HTML代码非常简单。
Html程序代码
<body> <DIVidDIVid="container"> <DIVidDIVid="content"> <h1>Content</h1> <p>请改变浏览器窗口的高度，以观察footer效果。</p> <p>这里是示例文字，DIV固定………，这里是示例文字。</p> </DIV> <DIVidDIVid="footer"> <h1>Footer</h1> </DIV> </DIV> </body>
CSS代码：
程序代码
body,html{ margin:0; padding:0; font:12px/1.5arial; height:100%; } #container{ min-height:100%; position:relative; } #content{ padding:10px; padding-bottom:60px; /*20px(font-size)x2(line-height)+10px(padding)x2=60px*/ } #footer{ position:absolute; bottom:0; padding:10px0; background-color:#AAA; width:100%; } #footerh1{ font:20px/2Arial; margin:0; padding:010px; }
追问
你这说的什么？？里面怎么还有计算方式！！！能不能修改的规范一些，我看不懂！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
.main{
width:900px;
height:500px;
overflow:hidden;
position: relative;
margin:0 auto;
border:1px solid #000;
}
.bottom-center{
background: green;
width:100px;
height:100px;
position: absolute;
bottom: 0px;
left: 50%;
margin:0px 0px 0px －50px;
}
</style>
<div class="main">
<div class="bottom-center"></div>
</div>
这样就好了，margin的-50其实是根据方块儿的半径算出来的，可以改main的宽度试下
更多追问追答
追问
我的意思是这样的这是内容，如何通过css将其显示在底部中间，不要加div
追答
<body>
<div class="bottom-center">这是内容</div>
</body>
<style type="text/css">
.bottom-center{
position: absolute;
bottom: 0px;
left: 50%;
/*margin-left根据文字长度来定义*/
margin-left:-25px;
}
</style>
是这个意思吗？
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
