html - CSS图片居中问题？

html如下：

<header class="header">
    <span class="logo">
        <img src="img/baidu.png"/>
    </span>

CSS中为什么我在<header>和<span>中设置了vertical-align:middle;都不会使图片产生居中效果，

而用设置为表格的方式才能生效，

新手真心求问~？

# HTML

天蓬老师2190 天前865 次浏览

全部回复(5) 我要回复

迷茫2017-04-17 13:35:05

header没有闭合吧，

怪我咯2017-04-17 13:35:05

解决方法如下在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;
}

伊谢尔伦2017-04-17 13:35:05

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只相对自己所在行。

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. -- MDN

当然inline-block也是可以的。

栗子
plunker

伊谢尔伦2017-04-17 13:35:05

vertical-align:middle 使子元素居中，只能在表格单元或者元素display属性设置为table-cell 生效。这里有个视频教程可以解决你的疑惑。http://www.imooc.com/learn/542

PHPzhong2017-04-17 13:35:05

要在span中设置display:table-cell

取消回复发送