html - CSS图片居中问题？

Question

html如下：

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

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

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

新手真心求问~？

Answer 1

header沒有閉合吧，

Answer 2

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

Answer 3

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

Answer 4

vertical-align:middle 讓子元素居中，只能在表格單元或元素display屬性設定為table-cell 生效。 這裡有個影片教學可以解決你的疑惑。 http://www.imooc.com/learn/542

Answer 5

要在span設定display:table-cell