如何将图像和文本垂直对齐到 div 中的中间

【问题标题】：How can I vertically align an image and text to the middle within divs如何将图像和文本垂直对齐到 div 中的中间
【发布时间】：2012-04-23 13:47:39
【问题描述】：

例如：http://jsfiddle.net/S23ut/1/

我希望图像和文本垂直对齐到其容器的中间。我似乎无法为此获得正确的 CSS。有什么想法/技巧吗？

【问题讨论】：

标签： html css

【解决方案1】：

我不确定跨浏览器的兼容性，但使用 CSS display: table-XXX 可能会起作用：

#offer_widget .row {
    display: table-row;
}

#offer_widget .row_image {
    display: table-cell;
    text-align:center;
    vertical-align: middle;
}
#offer_widget .row_text {
    display: table-cell;
    vertical-align: middle;
}

见this update to your jsFiddle。

【讨论】：

【解决方案2】：

嘿，删除浮动并提供显示表属性现场演示http://jsfiddle.net/rohitazad/S23ut/5/

【讨论】：

【解决方案3】：

在 2 个嵌套的 div 中使用以下 css 样式：

display:table
display:table-cell

例如。

<html>
<head>
    <style>
        #outer{width:100px; height:60px; border:solid 1px #f00;display:table;}
        #inner{display:table-cell; vertical-align:middle;text-align:center;font-size:16px;}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">test</div>
    </div>
</body>
</html>

【讨论】：