老师，2-2练习，为什么我左侧的logo区域不能垂直居中呢？

来源：2-2 编程练习

Jeremy_Li7

2019-12-11 16:12:54

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>IMOOC</title>
<link rel="stylesheet" type="text/css" href="2.css">
</head>
<body>
<!--  在此完成网页的HTML代码-->
<header>
    <div class="container">
        <div class="logo">
<a href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png">MYMOOC</a>
</div>
        <nav>
            <a href="#" class="one active">HOME</a>
            <a href="#" class="two">COURSE</a>
            <a href="#" class="three">ACTUAL</a>
            <a href="#" class="four">PLAN</a>
            <a href="#" class="five">FAQ</a>
            <a href="#" class="six">NOTES</a>
        </nav>
    </div>
</header>
</body>
</html>

写回答

2回答

好帮手慕码

2019-12-11

已采纳

同学你好，可以通过设置边距是实现垂直居中：

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

Jeremy_Li7

提问者

2019-12-11

/*在此完成CSS样式设置*/
*{
    margin:0;
    padding:0;
    font-family:"aerial";
    font-size:15px;
}
header a{
    text-decoration:none;
}
header{
    width:100%;
    height:80px;
    background:#000;
}
header .container{
    width:1200px;
    margin:0 auto;
}
header .container .logo{
    float:left;
}
header .container .logo a{
    display:block;
	margin:5px 50px;
	color:#fff;
    font-size:20px;
}
header .container nav{
    float:right;
    height:80px;
    margin:0 25px;
}
header .container nav a{
    display:block;
    float:left;
    width:110px;
    height:73px;
    line-height:73px;
    text-align:center;
	color:#fff;
}
header .container nav .one{
    background:#d40112;
}
header .container nav .two{
    background:#feb800;
}
header .container nav .three{
    background:#78b917;
}
header .container nav .four{
    background:#433b90;
}
header .container nav .five{
    background:#f27c01;
}
header .container nav .six{
    background:#017fcb;
}
header .container nav a:hover,header .container nav a:active{
    padding-bottom:7px;
}

0 学习 · 40143 问题

查看课程

相似问题

请问老师这个导航栏的代码中如何让img图标垂直居中

回答 2

老师我的logo为什么不能垂直居中呢

回答 1

老师，我感觉我的logo没有居中，调不好。您帮我看下？

回答 3

给nav加了右浮动为什么元素会被挤出contiain？还有logo区的图片文字如何垂直居中

回答 2

老师帮我看下为什么我的logo，左侧剧中不了

回答 1

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