【问题标题】: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

标签: css vertical-alignment css-tables


【解决方案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-aligndisplay:table-cell 放在父级上,您需要在它们上使用包装表)

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

    【讨论】:

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

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

    【讨论】:

      【解决方案4】:

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

      display: block
      margin: 0 auto
      

      margin: 0 auto 是将图像与中心对齐。如果您希望图像左对齐,则不要包含此内容。如果您希望图像右对齐,您可以添加:

      float: right
      

      谢谢, G

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-02-12
        • 1970-01-01
        • 2014-05-27
        • 1970-01-01
        • 2013-06-12
        • 2016-09-19
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多