LOGO不知道怎么垂直居中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
header{
background: black;
height: 80px;
}
header > .container{
position: relative;
width: 1200px;
margin: 0 auto;
}
header> .container>a{
color: #fff;
margin-top: 5px;
}
 
nav{
float: right;
}
nav>a{
display: block;
height: 73px;
width: 110px;
color: #fff;
float: left;
text-align:center;
margin-top: :5px;
line-height: 73px;
} 
nav > a:nth-child(1) { background: #433b90; }
nav > a:nth-child(2) { background: #017fcb; }
nav > a:nth-child(3) { background: #78b917; }
nav > a:nth-child(4) { background: #feb800; }
nav > a:nth-child(5) { background: #f27c01; }
nav > a:nth-child(6) { background: #d40112; }
a{
text-decoration: none;
}
nav > a:hover,
nav > a.active { padding-bottom: 7px; }
</style>
<body>
<header>
<div class="container">
<a href="">
<img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png" alt="logo" />
 
MYMOOC
</a>
<nav>
<a href="test.html">Home</a>
<a href="">Cours</a>
<a href="">Actuel</a>
<a href="">PLAN</a>
<a href="">FAQ</a>
<a href="">Notes</a>
</nav>
</div>
</header>
</body>
</html>

我在做下一节的练习，但是logo部分不知道怎么控制。。

FeiHuang 2018-01-03

源自：HTML5网页布局 2-1 html5页面布局（表现层_header）

收起

3回答

慕哥6518254 回答被采纳获得+3积分 2018-01-03 09:31:28

header > .container{
position: relative;
width: 1200px;
margin: 0 auto;
}
header> .container>a{
display: inline-block;
color: #fff;
line-height: 80px;
text-indent: 50px;
}
header> .container>a>img{
position: absolute;
top:50%;
left: 0;
margin-top: -20px;
}

需要让logo图片相对于container绝对定位，高度为container的一半，再给一个自身高度一半的负外边距可实现垂直居中。同时需要让a标签有大于logo图片的缩进。

收起回答

FeiHuang 提问者 #1

非常感谢！

2018-01-03 23:01:17
萌萌哒猫头鹰 #2

再给一个自身高度一半的负外边距可实现垂直居中。同时需要让a标签有大于logo图片的缩进，这段话没明白

2018-03-12 23:35:03

好帮手慕糖 2018-03-13 10:36:25

你好，可以结合代码理解下哦，给其设置top:50%,会使得图片下移顶部整体高度的50%，然后把自身就（就是图片自己）往上移一半，就实现了垂直居中哦。

祝学习愉快~

收起回答

夜sama 2018-02-05 15:12:44

换个思想，为什么一定要“垂直居中”呢？直接<img style="padding-top: 20px;" alt="logo" />（在a标签内写个样式改padding值就可以）像这种logo图一般使用这种方法比楼下的方法简洁实用很多（PS：楼下的垂直居中确实是标准的，只是在此例子中没有太大的实践价值）

另外还有个更简洁的方法：可以直接把logo设置为a的背景图，并且设置背景图定位center 这样也会简单很多

收起回答