css中怎么样才能使内容在div的底部中间

 我来答
幻翼高达Zero
2019-07-23 · TA获得超过1.7万个赞
知道答主
回答量:499
采纳率:0%
帮助的人:7.9万
展开全部

需要准备的材料分别有:电脑、浏览器、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的底部居中。

咖啡色De_回忆
2013-05-25 · TA获得超过186个赞
知道小有建树答主
回答量:166
采纳率:100%
帮助的人:77.1万
展开全部
<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。没有必要的计算。

不知道能不能帮到你。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
jackzhag2015
2018-02-28 · TA获得超过1836个赞
知道小有建树答主
回答量:1145
采纳率:90%
帮助的人:405万
展开全部

内容在底部中间使用绝对定位,这个时候就可以添加bottom等方法实现:

.content{
    position: absolute;
    bottom: 0;/* 底部距离为0 */
    left:0;right:0;/* 距离左右距离相等即可造成居中 */
}

如果是整个div永远在页面的最底下,就是用固定定位

.contentBox {
    position: fixed;
    bottom: 0;
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2013-05-24
展开全部
代码实现
下面先考虑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; }
追问
你这说的什么??里面怎么还有计算方式!!!能不能修改的规范一些,我看不懂!
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
Nuer
推荐于2016-02-08 · 超过38用户采纳过TA的回答
知道小有建树答主
回答量:132
采纳率:0%
帮助的人:117万
展开全部
<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)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式