为什么用vertical-align效果出不来？是不是不能同时用margin？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IMOOC</title>
<style>
*{margin: 0;padding: 0;text-decoration: none;}
header{width: 100%;background-color: black;}
.content{width: 1200px;height: 80px;margin: 0 auto;overflow: hidden;}
.content > a{float: left;color: white;display: block;font-size: 30px;display: table;/*margin: 20px 25px;*/}
img{vertical-align: middle;display: table-cell;}
nav{float: right;}
nav > a{float: left;width: 120px;height: 73px;color: white;text-align: center;line-height: 73px;}
nav > a:nth-child(1){background-color: red;padding-bottom: 7px;}
nav > a:nth-child(2){background-color: yellow;}
nav > a:nth-child(3){background-color: green;}
nav > a:nth-child(4){background-color: purple;}
nav > a:nth-child(5){background-color: orange;}
nav > a:nth-child(6){background-color: blue;}
header nav > a:hover{padding-bottom: 7px;}
</style>
</head>
<body>
<header>
<div class="content">
<a href="#"><img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png"><!-- MYMOOC--></a>
<nav>
<a href="#">Home</a>
<a href="#">Course</a>
<a href="#">Actual</a>
<a href="#">Plan</a>
<a href="#">FAQ</a>
<a href="#">Notes</a>
</nav>
</div>
</header>
</body>
</html>
正在回答
同学你好，
1、嵌套的盒子不一定是div哦，换成其他标签也可以，主要是再嵌套一层。因为float浮动和display:table-cell;样式会有冲突，浮动的元素具有块元素特性，设置table-cell不会生效。
2、如果想要图片和文字全部都居中显示的话，外层可以不嵌套，给文字添加一个标签。例如：
样式：
a标签中设置字体大小为0是为了清除间隙，因为图片行内元素会产生间隙。字体大小可以单独添加在span中。
自己再测试下。如果我的回答帮助到了你，欢迎采纳~
祝学习愉快！
链接：https://class.imooc.com/lesson/753#mid=18765
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星