html如下：
<header class="header"> <span class="logo"> <img src="img/baidu.png"/> </span>
CSS中为什么我在<header>和<span>中设置了vertical-align:middle;都不会使图片产生居中效果，而用设置为表格的方式才能生效，
新手真心求问~？
欢迎选择我的课程，让我们一起见证您的进步~~
header没有闭合吧，
解决方法如下 在img前面加一个span
<p> <span></span> <img src="img/star.png" alt=""> </p>
给span设置属性
span{ height:100%; display:inline-block; vertical-align:middle; } p{ border:1px solid #333; width:500px; height:400px; text-align:center; } img{ vertical-align:middle; }
vertical-align 的是根据元素的基线baseline与父元素的基线来计算的，是相对于元素本身所处的行来说的,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.
vertical-align
baseline
<p class="parent"> <span class="child"> 123456 <img class="middle" src="xxx" /> </span> </p> <style> .middle { vertical-align: middle; } </style>
此时你将 .child 设置为行内块级元素，然后对其设置高度，这个高度并不是img本身的所在行的行高，所有在这种情况下是不会实现你想要的效果的。不管.child是否设了高度，img的vertical-align只相对自己所在行。
.child
img
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. -- MDN 当然inline-block也是可以的。
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. -- MDN
inline
table-cell
当然inline-block也是可以的。
inline-block
栗子plunker
vertical-align:middle 使子元素居中，只能在表格单元或者元素display属性设置为table-cell 生效。 这里有个视频教程可以解决你的疑惑。http://www.imooc.com/learn/542
要在span中设置display:table-cell
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
header没有闭合吧，
解决方法如下 在img前面加一个span
给span设置属性
vertical-align的是根据元素的基线baseline与父元素的基线来计算的，是相对于元素本身所处的行来说的,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.此时你将
.child设置为行内块级元素，然后对其设置高度，这个高度并不是img本身的所在行的行高，所有在这种情况下是不会实现你想要的效果的。不管.child是否设了高度，img的vertical-align只相对自己所在行。栗子
plunker
vertical-align:middle 使子元素居中，只能在表格单元或者元素display属性设置为table-cell 生效。 这里有个视频教程可以解决你的疑惑。http://www.imooc.com/learn/542
要在span中设置display:table-cell