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

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

下面是一个包含1行和3行文本的快速示例。两条线也应该垂直对齐

|----|         |----| 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实现此功能，或者我正在编辑菜单模块或使用一些jquery？

您是否尝试过使用：

display:inline-block;

自从我遇见他以来，他一直是我最好的伴侣。他的行为就像一个div，但可以在文本align:center上居中，也可以在垂直align:middle上居中

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

---

希望这有帮助

在本页上，您可以看到internet explorer不支持css值显示：表格单元格-IE8和IE9除外我认为：

我对joomla不太了解。。。

---

编辑器是否选择显示的图像？如果没有，您可以尝试将图像设置为背景图像，并使用css属性background position:left center

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

---

不幸的是，这些都不起作用。所以我最终使用了一些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);
  });
  }
});

密码是从我的电脑里抢来的。这将检查跨度中的线数，并向跨度中添加适当的类。然后，我将为生成的每个类添加一个边距顶部

---

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

不幸的是，如果有多行文本内联块，它似乎会与父级的顶部对齐。在我的例子中，这与Joomla加载的Mootools冲突，因此我使用了var j=jQuery.noConflict；开始时，将所有美元替换为j。

<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>

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

$(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);
  });
  }
});