老师，请问为什么文字没有竖直居中呢？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" manifest="cache.manifest">
<head>
<title>2-2-编程练习</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<base target="_blank">
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{font-family: "微软雅黑";}
a
{text-decoration: none;}
li
{list-style-type: none;}
header
{
position: fixed;
top: 0;
width: 100%;
min-width: 1200px;
height: 60px;
background-color: #222;
}
header > div
{
width: 1200px;
margin: 0 auto;
}
header h1
{
float: left;
height: 60px;
max-height: 100%;
}
header h1 > a
{
display: inline-block;
height: 60px;
line-height: 60px;
max-height: 100%;
color: #FFF;
}
header h1 > a > img
{margin: 10px auto;}
header nav > #navList
{
float: right;
height: 60px;
}
header nav > #navList > li
{
float: left;
height: 56px;
line-height: 60px;
width: 100px;
box-sizing: border-box;
text-align: center;
}
header nav > #navList > li:nth-child(1) /*导航列表项的第1项：Home*/
{background-color: #439;}
header nav > #navList > li:nth-child(2) /*导航列表项的第2项：Course*/
{background-color: #0BC;}
header nav > #navList > li:nth-child(3) /*导航列表项的第3项：Actual*/
{background-color: #8A0;}
header nav > #navList > li:nth-child(4) /*导航列表项的第4项：Plan*/
{background-color: #FA0;}
header nav > #navList > li:nth-child(5) /*导航列表项的第5项：Notes*/
{background-color: #F6B;}
header nav > #navList > li:nth-child(6) /*导航列表项的第6项：FAQ*/
{background-color: #D01;}
header nav > #navList > li:hover
{
font-weight: bold;
height: 60px;
}
header nav > #navList > li > a
{
font-size: 20px;
color: #FFF;
}
</style>
</head>
<body>
<header>
<div>
<h1>
<a href="http://www.imooc.com">
<img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png">
IMOOC
</a>
</h1>
<nav>
<ul id="navList">
<li><a href="https://www.imooc.com/" title="慕课网首页">Home</a></li>
<li><a href="https://www.imooc.com/course/list" title="免费课程">Course</a></li>
<li><a href="https://coding.imooc.com/" title="实战课程">Actual</a></li>
<li><a href="https://class.imooc.com/" title="就业班">Plan</a></li>
<li><a href="https://www.imooc.com/article" title="手记">Notes</a></li>
<li><a href="https://www.imooc.com/wenda" title="猿问">FAQ</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>完整代码如上。
在CSS中已经对<a>标签转为inline-block，并且height等于line-height，为什么文字“IMOOC”没有竖直对齐？如下图所示。
当把logo图片注释掉时，文字“IMOOC”就可以竖直对齐了，如下图所示。
看来<img>标签会对后面的文字产生影响。
0
收起
正在回答
4回答
同学你好，这边测试了一下，和同学效果是一样的：
老师把第一次粘贴的代码替换到img标签中的样式也是可以实现的。
可能之前老师误操作了，非常抱歉！这样写是没有问题的。
祝学习愉快！
我学习太差被关起来了
2019-07-12 15:10:45
完整代码如下所示。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" manifest="cache.manifest">
<head>
<title>2-2-编程练习</title>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<base target="_blank">
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{font-family: "微软雅黑";}
a
{text-decoration: none;}
li
{list-style-type: none;}
header
{
position: fixed;
top: 0;
width: 100%;
height: 60px;
background-color: #222;
}
header > div
{
width: 1200px;
margin: 0 auto;
}
header h1
{
float: left;
height: 60px;
max-height: 100%;
}
header h1 > a
{
display: inline-block;
height: 60px;
line-height: 60px;
max-height: 100%;
color: #FFF;
}
header h1 > a > img
{
margin-bottom: 9px;
vertical-align: middle;
}
header nav > #navList
{
float: right;
height: 60px;
}
header nav > #navList > li
{
float: left;
height: 56px;
line-height: 60px;
width: 100px;
box-sizing: border-box;
text-align: center;
}
header nav > #navList > li:nth-child(1) /*导航列表项的第1项：Home*/
{background-color: #439;}
header nav > #navList > li:nth-child(2) /*导航列表项的第2项：Course*/
{background-color: #0BC;}
header nav > #navList > li:nth-child(3) /*导航列表项的第3项：Actual*/
{background-color: #8A0;}
header nav > #navList > li:nth-child(4) /*导航列表项的第4项：Plan*/
{background-color: #FA0;}
header nav > #navList > li:nth-child(5) /*导航列表项的第5项：Notes*/
{background-color: #F6B;}
header nav > #navList > li:nth-child(6) /*导航列表项的第6项：FAQ*/
{background-color: #D01;}
header nav > #navList > li:hover
{
font-weight: bold;
height: 60px;
}
header nav > #navList > li > a
{
font-size: 20px;
color: #FFF;
}
</style>
</head>
<body>
<header>
<div>
<h1>
<a href="http://www.imooc.com">
<img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png"> IMOOC
</a>
</h1>
<nav>
<ul id="navList">
<li><a href="https://www.imooc.com/" title="慕课网首页">Home</a></li>
<li><a href="https://www.imooc.com/course/list" title="免费课程">Course</a></li>
<li><a href="https://coding.imooc.com/" title="实战课程">Actual</a></li>
<li><a href="https://class.imooc.com/" title="就业班">Plan</a></li>
<li><a href="https://www.imooc.com/article" title="手记">Notes</a></li>
<li><a href="https://www.imooc.com/wenda" title="猿问">FAQ</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>浏览器显示效果是logo图和文字基本上竖直居中。
【1】以下是Chrome（version 75.0.3770.100 ）中的效果。
【2】以下是Firefox（version 68.0）中的效果。
【3】以下是Edge（version 44.17763.1.0）中的效果。
【4】以下是IE（version 11.615.17763.0）中的效果。
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星