如何使这个 <ul> 居中？答案

【问题标题】：How to center this <ul>?如何使这个 <ul> 居中？
【发布时间】：2011-07-11 10:37:10
【问题描述】：

到目前为止，我有这个代码：

function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; display:inline;'>";

while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";

}

产生这个：

有谁知道如何使上述居中，使其在中间？

任何想法表示赞赏。

谢谢

更新：我已经尝试将样式设置为块并使用固定的边距：0 auto 但这是一个问题，我需要它沿着 100% 的宽度延伸，因为字段“IP、城市、地区、国家名称和国家代码将是通过 GeoLoc 服务自动填充，因此具有 500 像素的固定宽度不够大，因此它需要是整个宽度，我希望它居中，因为如果有人查看我的网页，那里的信息不会使用整个宽度看起来更好的居中。我希望这是有道理的。

【问题讨论】：

标签： php html css html-lists centering

【解决方案1】：

如果您想在不提供固定宽度的情况下将 UL 的内容居中，最简单的方法可能如下：

function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; text-align: center;'>";

while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";

}

【讨论】：

【解决方案2】：

将ul 包装在一个 div 中，然后添加这个 CSS：

.className {
    margin:0 auto;
}

HTML：

<div class="className">
<ul style='list-style-type: none; display:inline;'>
<li style='list-style-type: none; display:inline; padding-right:5px;'>Stuff</li>
</ul>
</div>

将ul样式改为block

【讨论】：

.className 需要定义一个width 才能使margin:0 auto; 工作。

【解决方案3】：

试试这个：

<ul style='list-style-type: none; display:block; width:500px; margin:0 auto;'>

【讨论】：

@Ryan 好吧，那么不要使用列表，而只是使用文本 - 然后将其与 text-align:center...