html - CSS图片居中问题？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html - CSS图片居中问题？

天蓬老师 2017-04-17 13:33:05

[HTML讨论组]

1321

html如下：

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

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

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

新手真心求问~？

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(5)

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

header没有闭合吧，

赞 +0

添加回复

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

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

赞 +0

添加回复

伊谢尔伦2017-04-17 13:35:05 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只相对自己所在行。