老师请检查，然后给页脚内容水平垂直居中，怎么设置思路不是很清晰

首页课程实战体系课手记专栏慕课教程

来源：2-7 编程练习

kekeke_

2022-03-06 10:33:34

<!DOCTYPE html>

<html>

<head>

*{margin: 0;

padding: 0;}

body{text-align: center;}

.header{width: 100%;

height: 100px;

margin: 0 auto;

background: black;

overflow: hidden;

zoom:1;

position: fixed;

}

ul{list-style: none;

}

a{text-decoration: none;color: white;

font-family: 微软雅黑;

font-size: 16px;}

.logo{float: left;}

.nav{float: right;

overflow: hidden;

zoom:1;}

.nav li{float: left;

padding: 40px;

}

.log img{

display: block;

}

.main{margin: 0 auto;

}

.footer{width: 100%;

height: 100px;

line-height: 100px;

text-align: center;

/*margin: 0 auto;*/

background: black;

position: fixed;

bottom: 0px;

color: white;

overflow: hidden;

}

/*.png{width: 100%;} */

div img{display: block;

margin: 0 auto;

width: 100%;}

.nav-bottom{}

.nav-bottom li{float: left;

/*margin: 0 auto;*/

margin: 0 150px;

}

.nav-bottom li a {font-size: 20px;}

</style>

</head>

<body>

<ul>

</ul>

</div>

</div>

</div>

</div>

<ul>

</ul>

</div>

</body>

</html>

下载视频

写回答

1回答

好帮手慕然然

2022-03-06

已采纳

同学你好，代码优化如下：

1、main盒子中，上下一部分内容会被header和footer覆盖，建议设置上下padding来解决这个问题，如下

2、css选择器优化

问题解答：页脚内容水平垂直居中

垂直居中：一般实现单行文字垂直居中，可以给父盒子设置line-height行高等于height高度即可。

水平居中：如果是文字、行内盒子、行内块盒子在父盒子内部水平居中，可以给父盒子设置text-align: center属性；如果是块盒子水平居中，可以使用margin: 0 auto，不过盒子宽度要设置一个确定值才可以，如图所示

祝学习愉快！

0 学习 · 40143 问题

查看课程

相似问题

页脚有空隙怎么消除，在网页调整大小的时候，如何做到自适应

回答 2

页脚内容怎么居中，

回答 2

老师请问为什么，我给footer设置position:fixed，它就整个消失？

回答 3

请问老师除了我代码中的办法让底部文字垂直居中呢？

回答 2

页脚宽度没撑开图片直接有行距设置固定定位之后页脚内容就不见了

回答 2

打开慕课网App查看更多内容