如何将未知大小的图像垂直对齐到div的中心？

发布于 2024-12-02 01:16:35 字数 1110 浏览 3 评论 0原文

我有一个简单的 HTML 按钮，其中包含文本和图像：

HTML: (已经在 http 上://jsfiddle.net/EFwgN)

<span class="Button">
    <img src="http://www.connectedtext.com/Image/ok.gif" />
    Small Icon
</span>

CSS：

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; height:24px; line-height:24px;
             vertical-align:middle;}
span.Button img {vertical-align:middle;}

我无法想出适合这些要求的组合：

图像和文本需要垂直位于div 的中间，文本在中间的图像。它应该是整洁的。
水平 - 图像可以是任何宽度，并且按钮应该变大以显示它。
垂直 - 图像可以任何高度，小于或大于按钮。当图像较大时，我不介意是否显示或裁剪多余的像素，只要它居中即可。
按钮处于固定高度。目前我使用 line-height 使文本居中。
该按钮应该与其他按钮和文本很好地对齐。
该解决方案需要适用于所有最新版本的主要浏览器和 Internet Explorer 8。

这是带有我当前代码的 jsfiddle： http://jsfiddle.net/EFwgN
（注意小图标位于按钮中心稍下方）

原文

I have a simple HTML button which contains text and an image:

HTML: (Already on http://jsfiddle.net/EFwgN)

<span class="Button">
    <img src="http://www.connectedtext.com/Image/ok.gif" />
    Small Icon
</span>

CSS:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; height:24px; line-height:24px;
             vertical-align:middle;}
span.Button img {vertical-align:middle;}

I can't come up with a combination that would fit these requirements:

The image and text need to be vertically at the middle of the div, with the text in the middle of the image. It should be neat.
Horizontally - the image may be in any width, and the button should grow to show it.
Vertically - the image may be in any height, smaller or larger than the button. When the image is larger, I don't mind if the extra pixels are displayed or cropped, as long as it is centered.
The button is in a fixed height. Currently I use line-height to center the text.
The button should sit nicely in line with other buttons and text.
The solution needs to work on all latest versions of major browsers, and Internet Explorer 8.

Here's a jsfiddle with my current code: http://jsfiddle.net/EFwgN
(note the small icon is slightly below the center of the button)

分享到QQ

分享到微博

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

发布评论

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

楠木可依 2024-12-09 01:16:36

一个简单的解决方案，如果您需要不低于 IE8（标准模式）： http://jsfiddle.net /kizu/EFwgN/31/

只需将 margin: -100px 0 添加到 img 中，这样负边距就会吃掉任何大的高度：

span.Button img {vertical-align:middle; margin:-100px 0;
                 position:relative; top:-2px;}

我已经添加了位置：相对； top:-2px;只是为了看起来更好:)

但是如果你需要兼容模式或IE lt 8的支持（出于某种原因），带有边距的东西将不起作用。因此，您需要额外的标记： http://jsfiddle.net/kizu/EFwgN/28/< /a>，但它有点老套，并且仅适用于固定按钮的高度（如您的示例中所示）。

A simple solution, if you need no less than IE8 (in Standards mode): http://jsfiddle.net/kizu/EFwgN/31/

Just add margin: -100px 0 to img, so the negative margin would eat any large height:

span.Button img {vertical-align:middle; margin:-100px 0;
                 position:relative; top:-2px;}

I've added position: relative; top:-2px; just to look it better :)

But if you'll need support for compatibility mode or IE lt 8 (for some reason), the thing with margin won't work. So you'll need an extra markup: http://jsfiddle.net/kizu/EFwgN/28/, but it's somewhat hacky and works only with the fixed button's height (like in your example).

回复收藏 0 原文

谈情不如逗狗 2024-12-09 01:16:36

使用基于表格的显示。由于 display:table-cell; 和 height:24px 之间存在冲突，需要缩小图像。与评论中中止的尝试非常相似，但在图像上包含所需的 display:block;：http://jsfiddle.net/shanethehat/5ck3s/

回复收藏 0 原文

风为裳 2024-12-09 01:16:36

就这样，使用 jQuery：

$(".button img").load(function()
          {
              $(this).each(function()
                           {
                               sh = $(this).outerHeight();
                               if (sh > 24){
                               alert(sh);
                              $(this).css("margin-top", - (sh - 24) / 2 + 'px');
                              }
                           });
          });

编辑：刚刚看到您想要纯 CSS，好吧，这里是代码迷们！ :)

There you go, using jQuery:

$(".button img").load(function()
          {
              $(this).each(function()
                           {
                               sh = $(this).outerHeight();
                               if (sh > 24){
                               alert(sh);
                              $(this).css("margin-top", - (sh - 24) / 2 + 'px');
                              }
                           });
          });

Edit: Just saw that you wanted it pure CSS, well, here's to the code gulfers out there! :)

回复收藏 0 原文

你是年少的欢喜 2024-12-09 01:16:36

为什么在图像确实比按钮高的情况下不缩小图像呢？

span.Button img {
  vertical-align:middle;
  max-height: 100%;
}

Why not make the image shrink in the case where it is indeed taller than the button?

span.Button img {
  vertical-align:middle;
  max-height: 100%;
}

回复收藏 0 原文

表情可笑 2024-12-09 01:16:36

我可能错过了一些要求，因为将 span.Button 的高度设置为 auto 对我来说很有效。

如果您想要的是按钮仅水平生长，垂直溢出被裁剪，那么我可能会这样做：

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; width:auto; height:24px; line-height:24px;overflow:hidden;
             vertical-align:middle;
             }

使用一些 javascript 来确定 img 高度，然后相应地将其居中。

I probably missed some of the requirements, as setting span.Button's height to auto did the trick for me.

If what you wanted is button growing only horizontally, with vertical overflow cropped, than maybe I'd do it like this:

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; width:auto; height:24px; line-height:24px;overflow:hidden;
             vertical-align:middle;
             }

using a bit of javascript to determine img height, and then center it accordingly.

回复收藏 0 原文