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

发布于 2024-12-16 11:27:32 字数 591 浏览 4 评论 0原文

良好的浏览器不等式，它需要在 IE 8 及以上版本上有效；如何在不知道图像宽度或高度的情况下将图像置于浮动 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

谢谢

原文

Good browsers out of equation, it needs to be valid on IE 8 and sup;
How to center image on a floated div without knowing image width or height ?

The image is semantically relevant so, it cannot be a background;
The html:

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

And the css:

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

I've tried display:table-cell; no success;
I've tried text-align center with a certain padding: no success;

Failed try:
http://cssdesk.com/pQnRG

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴梦一场 2024-12-23 11:27:32

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

回复收藏 0 原文

许仙没带伞 2024-12-23 11:27:32

如果包含元素有宽度，则可以使用以下内容：

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

If the containing element has a width, you can use the following:

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

回复收藏 0 原文

流殇 2024-12-23 11:27:32

关于水平居中，您链接到此处的示例： 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>

Concerning horizontal centering, the example that you linked to here: http://cssdesk.com/pQnRG does not work properly since the width of the div is smaller than the width of the image. If you increase the width to 40% for example, you'll see that the image will be centered correctly, even when the containing div has a padding.

Concerning vertical centering, display:table-cell "requires a !DOCTYPE. IE9" on IE8. http://www.w3schools.com/cssref/pr_class_display.asp Alternatively, although unethical, you can use a table/row/cell directly as an additional container:

.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;
}

And the HTML:

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

回复收藏 0 原文

~没有更多了~