简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)
html - CSS图片居中问题？
天蓬老师
天蓬老师 2017-04-17 13:33:05
0
5
1073

html如下：

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

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

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

新手真心求问~？

天蓬老师
天蓬老师

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

reply all(5)
迷茫
迷茫2017-04-17 13:35:05 5 floor

header没有闭合吧，
Like +0
Add Reply
刘奇
刘奇2017-04-17 13:35:05 4 floor

解决方法如下 在img前面加一个span

给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;
}
Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-04-17 13:35:05 3 floor

vertical-align 的是根据元素的基线baseline与父元素的基线来计算的，是相对于元素本身所处的行来说的,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.


    
        123456

此时你将 .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
Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-04-17 13:35:05 2 floor

vertical-align:middle 使子元素居中，只能在表格单元或者元素display属性设置为table-cell 生效。 这里有个视频教程可以解决你的疑惑。http://www.imooc.com/learn/542
Like +0
Add Reply
PHPzhong
PHPzhong2017-04-17 13:35:05 1 floor

要在span中设置display:table-cell
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！