如何在li元素中居中图像+文本

Question

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

我已经设法使用两个跨度和行高度垂直居中元素。但我没有水平居中，因为文本对齐不适用于跨度，浮动中间不存在。

你们有一些想法吗？

这里是我的代码：

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

看看这个小提琴，看一个实例：

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

Answer 2

尝试将text-align: center;应用于范围的父级（或任何祖先）元素，因为范围是内联元素（假设.text是您的范围）。

或者尝试将span作为块元素并将其左右边距设置为auto：

.text {
    display: block;
    margin: 0 auto;
}

像spans这样的内联元素会在其祖先元素上响应text-align，而像div这样的块元素会将边距设置为auto。请注意，元素中包含的文本将响应放置在该元素上的text-align（因为该文本在技术上是该元素内部的“文本节点”）。

Answer 3

您的具体问题是您是浮动图像并向左跨越但是希望它们居中。移除两者上的浮动，然后你可以将text-align：center放在li元素上。

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;
text-align:center;
}

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