如何在不知道图像宽度或高度的情况下将浮动 div 上的图像垂直和水平居中？答案

【问题标题】：how to center vertically and horizontaly an image on a floated div without knowing image widths or heights?如何在不知道图像宽度或高度的情况下将浮动 div 上的图像垂直和水平居中？
【发布时间】：2011-12-30 15:40:10
【问题描述】：

优秀的浏览器不适合，它需要在 IE 8 和 sup 上有效；如何在不知道图像宽度或高度的情况下将图像居中放在浮动 div 上？

图像在语义上是相关的，所以它不能是背景； html:

<div class="logo-organization-home">
 <img src="images/logoOrganization1.png" alt="logo organization 1"/>
</div>

还有css：

.logo-organization-home {
    float:left;
    background-color: #fafaed;
    border: 4px solid #f7f4ee;
    width: 18%;
}

我试过 display:table-cell;没有成功；我已经尝试使用特定填充的文本对齐中心：没有成功；

尝试失败： http://cssdesk.com/pQnRG

谢谢

【问题讨论】：

关于此处所述代码的任何适当解决方案？

标签： css centering

【解决方案1】：

要水平居中，请使用：'text-align:center' for .logo-organization-home

【讨论】：

【解决方案2】：

如果包含的元素有宽度，你可以使用下面的：

.logo-organization-home img {
    display:block;
    margin:0 auto;
}

【讨论】：

【解决方案3】：

关于水平居中，您在此处链接的示例：http://cssdesk.com/pQnRG 无法正常工作，因为 div 的宽度小于图像的宽度。例如，如果将宽度增加到 40%，您会看到图像将正确居中，即使包含的 div 具有填充。

关于垂直居中，在 IE8 上 display:table-cell “需要一个 !DOCTYPE.IE9”。 http://www.w3schools.com/cssref/pr_class_display.asp 或者，虽然不道德，但您可以直接使用表格/行/单元格作为附加容器：

.logo-organization-home {
    float:left;
    background-color: #fafaed;
    border: 4px solid #f7f4ee;
    width: 18%;
}
table{
    width:100%;
    height:100%;
}
td{
    vertical-align:center;
    text-align:center;
}

还有 HTML：

<div class="logo-organization-home">
    <table><tr><td>
        <img src="images/logoOrganization1.png" alt="logo organization 1"/>
    </td></tr></table>
</div>

【讨论】：