Question

我有一个简单的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。

这是我当前代码的一个小问题： http://jsfiddle.net/EFwgN
（注意小图标略低于按钮的中心）

Answer 1

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

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

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

我添加position: relative; top:-2px;只是为了更好看：）

但是如果您需要支持兼容模式或IE lt 8（由于某种原因），带边距的东西将无效。因此，你需要一个额外的标记：http://jsfiddle.net/kizu/EFwgN/28/，但它有点hacky并且仅适用于固定按钮的高度（如在你的例子中）。

Answer 2

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

Answer 3

你去，使用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，好吧，这里是代码gulfers那里！：）

Answer 4

为什么不让图像在比按钮更高的情况下缩小？

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

Answer 5

我可能错过了一些要求，因为设置了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高度，然后相应地居中。

Answer 6

怎么样......这个？

http://jsfiddle.net/92K8J/

为图片添加了display:inline-block，并删除了容器的固定height。

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

6 个答案: