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

我正在尝试在布局上使用垂直对齐：中间来垂直居中文本，有时是图像，但它只能处理文本。谁能告诉我为什么？垂直对齐中间显示表格单元格不在图像上工作

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/我创建了一个小提琴藏汉

来源

2013-12-14 Elaine Marley

为什么你需要'显示：表cell'？ – greenish

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

所以你没有真正垂直对齐相对于DIV这些元素，你只是垂直对齐span元素相对于跨距:)

内部的文本如果你真的想使用垂直表-centering，这里是正确的代码： http://jsfiddle.net/WXLsY/

（vertical-align和display:table-cell去父，你需要对他们的包装表）

但也有其他方法可以做到这一点（SO有很多的答案，这样问题，只需使用搜索引擎ch）

来源

2013-12-14 15:50:37

在您的示例中，'img'和'span'子元素不需要'vertical-align：middle'属性。剩下的CSS就足够了，解释很好。 –

正确（它是从OP的代码中遗留下来的） –

我明白了，井表本身并不是必需的，但我正在使用它们成功地处理文本。我的图片是响应式的，所以我不知道宽度或高度能够通过位置居中：绝对例如 –

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

HTML：

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

把你的img置于span，图像是被替换的元素，它不能包含子内容，因此vertical-align不起作用。

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元素，但是这将是一个不同的方法。

来源

2013-12-14 15:50:08

-2

您可以尝试添加 - > line-height：200px;在span style部分，我认为它可能有效;

来源

2013-12-14 15:56:11 dpuertas

为了垂直对齐表格单元格内的图像，您需要为图像显示一个块。

display: block 
margin: 0 auto

margin：0 auto是将图像与中心对齐。如果你想让图像左对齐，那么不要包含这个。如果你想对齐您可以添加图像右：

float: right

感谢，摹

来源

2017-01-16 08:44:28

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

回答

相关问题