如何用图像居中大文字？

Question

我有一个侧边栏，显示图标和一些文字对齐。此侧边栏可调整大小，有时文字和图标不适合同一行。

This jsfiddle显示了一个示例。蓝色按钮显示线条适合时的样子，橙色按钮显示文本太长时会发生什么。

我的目标是当线太长时让它看起来像这样：

文本应该保持在垂直居中的图像的右侧。如果我必须更改HTML，没问题。

Answer 1

@Ivan;你可以这样写http://jsfiddle.net/sandeep/UEk5b/15/

a, a:visited {
    color: blue;
    text-decoration: none;
    display:table;
}
ul li a span {
    display: inline-block;
    width:102px;
    vertical-align: middle;
}

display:table在IE7＆amp;下方。

修改

在没有display:table的情况下进行检查 http://jsfiddle.net/sandeep/UEk5b/19/

Answer 2

尝试这种方式：

ul li {
    cursor: pointer;
    padding-left: 70px;

ul span {
    vertical-align: middle;
    display: inline-block;
}

ul img {
    vertical-align: middle;
     margin: 0 0 0 -70px;
}

http://jsbin.com/ogofun/5/edit#html,live

Answer 3

你需要的是html表元素：

<div id="resizable">
  <ul>
    <li>
      <a href="#" class="ajax-page">
        <table><tr><td valign="middle">
          <img src="http://bit.ly/mRkUDB" alt="" width="60px" height="60px"/>
        </td><td valign="middle">
          <span>This is a test</span>
        </td></tr></table>
      </a>
    </li>
    <li>
      <a href="#" class="ajax-page">
        <table><tr><td valign="middle">
        <img src="http://bit.ly/o7Elfp" alt="" width="60px" height="60px"/>
        </td><td valign="middle">
        <span>This is another larger test</span>
        </td></tr></table>
      </a>
    </li>
  </ul>
</div>

尽管你仍然可能想要使用不同CSS样式或低宽度的不同表示，但在这种情况下使用表格可能是一个坏主意。