css – 垂直对齐中间显示表单元格不能在图像上工作

我正在尝试在布局上使用vertical-align：中间,以便将文字垂直居中,有时是图片,但它只适用于文字.谁能告诉我为什么？

HTML：

<div>
    <img src="http://jsfiddle.net/img/logo.png"/>
</div>

<div>
    <span> text </span>
</div>

CSS：

div{
    width:200px;
    height:200px;
    background-color:red;
    display:table;

    margin:10px;
}
img,span{
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/9uD8M/我也创造了一个小提琴

解决方法

放置边框：您的img,span标签上有1px的纯黑色,然后检查浏览器中的两个元素.安慰.您会注意到,该范围默认为其父级的100％高度,而图像具有定义的高度(实际图像的高度).

所以你不是真的垂直对齐这些元素相对于div,你只是垂直对齐在span元素内的文本相对于span

原文地址：https://www.jb51.cc/css/216405.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：红宝石在轨道 – Turbolinks与载波下一篇：css – 使用JavaScript检测慢硬件/