2-1头部的制作问题

.logo img {vertical-align: center;}

为何header里面的图片垂直居中不能用vertical-align，图片是内联标签，应该支持啊，为何没效果

源自：项目：网页布局案例 2-1 头部的制作

收起

2回答

卡布琦诺回答被采纳获得+3积分 2017-05-23 11:42:02

vertical-align一般用于表格或者是向下图中的图片与文本对齐的设置中，考虑到它的兼容性，一般不会用于设置单独的img图片的垂直居中。

卡布琦诺 2017-05-22 10:58:42

vertical-align:middle而不是vertical-align: center。vertical-align没有center这个属性值，祝学习愉快！

提问者 OlafChou #1

那你的意思是，不用给padding值让图片居中，这样的方法也可以？

2017-05-22 12:17:44
卡布琦诺回复提问者 OlafChou #2

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。示例代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片居中</title> <style> * { margin: 0; padding: 0; } img.middle { vertical-align: middle; } </style> </head> <body> <div>我来自慕课网<img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />我来自慕课网</div> </body> </html> vertical-align一般用于表格或者是图标与文本对齐的设置中，没有办法使图片在父级盒子中居中哦~

2017-05-22 13:59:10
提问者 OlafChou 回复卡布琦诺 #3

恩，但是img也属于行内元素啊，这样应该可以

2017-05-23 08:47:48