0

基本上我有 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;
}

这是它现在的样子的图像。（如果标记了我想要居中的元素）

http://i.imgur.com/tI9Vulf.png

4

3 回答 3

3

你可以使用一个text-align规则：

li.center {
  text-align: center;
}

看看这个小提琴的一个活生生的例子：

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

于 2013-01-29T17:41:19.313 回答
1

尝试应用text-align: center;到您的跨度的父（或任何祖先）元素，因为跨度是一个内联元素（假设.text是您的跨度）。

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

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

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

于 2013-01-29T17:43:09.433 回答
1

您的具体问题是您正在浮动图像并向左跨度，但随后希望它们居中。删除两者上的浮动，然后您可以将 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;
}
于 2013-01-29T17:50:03.943 回答