html - 如何在 li 元素中居中图片+文字

Question

基本上我有 li 元素，其中包含一个小图标和一个文本，我想将这些元素水平和垂直居中。但是我没有让它工作，因为我没有真正的 CSS 经验。

我已经设法使用两个跨度和行高使元素垂直居中。但是我的水平居中失败了，因为文本对齐不适用于跨度，并且 float 中间不存在。

你们有什么想法吗？？

这里是我的代码:

HTML:

echo "<li style=\"background-color:#f7f7f7; color:#2EA620;\"><span class=\"image\"><img src=\"Images/List/Teams/" . $temp . ".png\" /></span><span class=\"text\">".$obj_teams->Name."</span></li>";

CSS:

li {
    width:173px;
    height:30px;
    line-height:30px;
    font:"Myriad Pro";
    font-size:14px;
    padding-left:10px;
    padding-right:10px;
    border-bottom:1px solid;
    border-left:1px solid;
    border-right:1px solid;
    border-color:#CCC;
}

.image {
    float:left;
    text
}

.text {
    float:left;
    color:#2EA620;
    line-height:30px;
}

这是它现在的样子的图片。 (如果标记了我要居中的元素)

Answer 1

您可以使用 text-align 规则:

li.center {
  text-align: center;
}

看一下这个 fiddle 的实例:

http://jsfiddle.net/fX9jp/1/