使用 css 将图标旁边的多行文本垂直居中

Question

我有一个内联有序列表，其中包含图像和一些文本。我希望文本在图标旁边垂直居中。

这是一个包含 1 行和 3 行文本的简单示例。 2 条线也应该很好地垂直对齐。

|----|         |----| Somewhat
|    | Link    |    | longer
|----|         |----| Link

Joomla 设置为将菜单生成为列表，因此这是我必须使用的代码。

<ul class="menu" id="toolbox">
    <li class="item301">
        <a href="/business-services/publications.html">
           <img src="/images/stories/icon_publications.png" alt="publications" />
           <span>Publications</span>
        </a>
    </li>
    <li class="item302">
        <a href="/business-services/hamilton-business-directory.html">
           <img src="/images/stories/icon_business-directory.png" alt="business-directory" />
           <span>Business Directory</span>
        </a>
    </li>
</ul>

下面的 CSS 在 Firefox 中有效，但在 IE 中无效。

#toolbox a {
  padding: 0;
  display: inline;
  border: 0 none;
} 
#toolbox img {
  width: 42px;
  float: left;
}
#toolbox li {
  float: left;
  width: 105px;
  height: 42px;
}
#toolbox span {
  height: 42px;
  vertical-align: middle;
  display: table-cell;
  width: 60px;
}

是否可以只使用 css，或者我正在考虑编辑菜单模块或使用一些 jquery？

Answer 1

在此页面上，您可以看到 Internet Explorer 不支持 css 值“display: table-cell” - IE8 除外（我认为是 IE9）：
http://www.css4you.de/display.html#footer

我不对joomla了解很多...
编辑器是否选择显示的图像？如果没有，您可以尝试将图像设置为背景图像并使用 css 属性“背景位置：左中心”

Answer 2

我认为这不可能在所有浏览器中获得相同的结果，就像你在 FF 中所说的那样，它似乎可以正确地完成任务，而在其他浏览器中它会搞砸。我通常这样做的方法是将图像作为链接的背景。它也更好，因为这样您也可以单击图像进行导航。

<ul class="menu" id="toolbox">
    <li class="item301">
        <a class="link1" href="/business-services/publications.html">Publications</a>
    </li>
    <li class="item302">
        <a class="link2" href="/business-services/hamilton-business-directory.html">Business Directory</a>
    </li>
</ul>

和CSS：

.menu a {
 background-position: left 50%;
 background-repeat: no-repeat;
 display: block;
 padding-left: $px /* $ = the width of your image plus a little more to space nicely */
}

.link1 {
 background-image: url(link1.png);
}

.link2 {
 background-image: url(link2.png);
}

Answer 3

不幸的是，这些都不起作用。所以我最终使用了一些jquery来弥补IE7的不足。这是我使用的：

$(document).ready(function() {
  if ($.browser.msie && parseInt($.browser.version) == 7) {
  var lineHeight = parseInt( $("#toolbox span").css("lineHeight"), 10 );

$("#toolbox span").each(function() {
    var linesNbr = $(this).height() / lineHeight;
    $(this).addClass("lines" + linesNbr);
  });
  }
});

代码是从 http://vidasp.net/tinydemos/numberOfLines.html。这会检查跨度中的行数并向跨度添加适当的类。然后，我将为生成的每个类添加一个 margin-top 。

不是我正在寻找的解决方案，但它有效。

Answer 4

你有没有尝试过使用：

display:inline-block;

自从我遇见他以来，它一直是我最好的伙伴。他的行为就像一个 div，但可以以 text-align:center 为中心，也可以以 vertical-align:middle;

如果您支持 ie7，则需要使用此版本：

display:inline-block;zoom:1; *display: inline;/*IE7 Fix*/

希望这有帮助