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

您是否尝试过使用：

display:inline-block;

自从我遇见他以来，这是我最好的伴侣。他的行为就像一个div，但可以以text-align：center和vertical-align:middle;

为中心

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

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

希望这有帮助

Answer 2

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

我对joomla不太了解...... 编辑器是否选择显示的图像？如果没有，您可以尝试将图像设置为背景图像，并使用css属性“background-position：left center”

Answer 3

我不认为在所有浏览器中都可以使用相同的结果，就像你在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 4

不幸的是，这些都没有奏效。所以我最终使用了一些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。

不是我想要的解决方案，但它确实有效。

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

4 个答案: