垂直对齐中间与显示表格单元格不适用于图像

Posted 2023-03-05

技术标签:

【中文标题】垂直对齐中间与显示表格单元格不适用于图像【英文标题】：Vertical-align middle with display table-cell not working on images 【发布时间】：2014-01-02 07:12:51 【问题描述】：

我正在尝试在布局上使用垂直对齐：中间来垂直居中有时是文本，有时是图像，但它只适用于文本。谁能告诉我为什么？

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/我也做了一个小提琴

【问题讨论】：

为什么需要display:table-cell？ 【参考方案1】：

这是解决问题的一种方法：

HTML：

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

把你的img 放在span 中，图片是替换元素，不能包含子内容，因此垂直对齐不起作用。

CSS：

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

span 
    display:table-cell;
    vertical-align:middle;

查看演示：http://jsfiddle.net/audetwebdesign/Fz6Nj/

有几种方法可以做到这一点，您也可以将display: table-cell 应用于父div 元素，但这是一种不同的方法。

【讨论】：

【参考方案2】：

将border: 1px solid black 放在img, span 标签上，然后在浏览器开发人员中检查这两个元素。安慰。您会注意到跨度默认为其父级的 100% 高度，而图像具有定义的高度（实际图像的高度）。

所以你并没有真正垂直对齐这些元素相对于 div，你只是垂直对齐 span 元素内的文本相对于 span :)

如果您真的想使用表格进行垂直居中，下面是正确的代码： http://jsfiddle.net/WXLsY/

（vertical-align 和 display:table-cell 放在父级上，您需要在它们上使用包装表）

但是还有其他方法可以做到这一点（这个问题有很多答案，只需使用搜索）

【讨论】：

在您的示例中，img 和 span 子元素不需要 vertical-align: middle 属性。剩下的css就够了，讲解也不错。我明白了，表格本身并不需要，但我成功地将它们与文本一起使用。我的图像是响应式的，所以我不知道能够通过 position:absolute 居中的宽度或高度，例如 @Elaine：试试this solution。我的收藏夹中有它，每次我想垂直对齐可变高度的元素时都会使用它 @onetrickpony : 我如何垂直居中 div 本身而不是它的内容 （当它的高度由它的内容而不是手动设置时）？ @user2284570 请参阅css-tricks.com/centering-in-the-unknown 或我在上面发布的答案的链接【参考方案3】：

您可以尝试添加 -> line-height: 200px;在跨度样式部分，我认为它可能会起作用；

【讨论】：

【参考方案4】：

为了在表格单元格内垂直对齐图像，您需要为图像提供块显示。