                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

哪位大神看下为啥这段代码文字显示在底部而不是在页面中部呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

#box2{border:red dashed 1px;width:150px}

#box1{float:left;

position:relative;

left:50%;

padding-top:50%;

}

#box2{

position:relative;

left:-50%;

}

</style>

</head>

<body>

<div id="box2">也是测试文字</div>

</div>

</body>

</html>

慕粉1440489053

2017-02-18

源自：初识HTML(5)+CSS(3)-升级版 15-7

关注问题我要回答

856

操作

收起

1 回答

Adele_D 回答被采纳 +3 积分
2017-02-18

你给box1加个背景或边框可以看见box2在最下面，

你把padding-top:50%，去掉会发现，box1和box2一样高，

因为，box1没有高度，会根据里面内容显示多高，

然后你又给box1加了上内边距，没有加下面的。。。

只能说padding-top不是这样用的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

#box2{border:red dashed 1px;width:150px}

#box1{float:left;

position:relative;

left:50%;

padding-top:50%;

border:1px solid red;

}

#box2{

position:relative;

left:-50%;

}

</style>

</head>

<body>

<div id="box2">也是测试文字</div>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

慕粉1440489053 提问者

非常感谢！

2017-02-24 回复有任何疑惑可以回复我~

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226379 人
解答问题 18241 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

5 回答这头部底部也不显示在头部和底部啊就是按顺序显示的

11 回答这段代码看了好久都不知道错在哪里点击文字就是没反应求哪位大神解一下

3 回答为什么我的文字显示在图片的下面而不是里面

6 回答请问大神这段代码错在哪里？为什么用chrome浏览器打开后，显示乱码？

3 回答不修改代码时，为何下面的文字不是和图片在一个大框里呢？

搜索更多本课相关问答

哪位大神看下为啥这段代码文字显示在底部而不是在页面中部呢？

我要回答关注问题

热搜

最近搜索清空

哪位大神看下为啥这段代码文字显示在底部而不是在页面中部呢？

1 回答

本课相似问答

哪位大神看下为啥这段代码文字显示在底部而不是在页面中部呢？