Question

问候，我正在尝试为我的某个列表创建一个分页面板，并希望将其置于中心位置。目前它看起来像：

<div class="panel">
  <div class="page">1</div>
  <div class="page">2</div>
  <div class="page">3</div>
</div>

所以我基本上试图让所有“page”div元素都转到“panel”容器的中心，如下所示：

_____________________________
|           1 2 3            |
------------------------------

有没有办法在不知道“页面”元素需要的宽度的情况下实现（可能有3或9页，并且两种情况都应该正确处理）。

提前致谢。

Answer 1

您是否有理由希望这些网页为<div>？如果你将它们设为<span class='page'>（在语义上更正确的imho）并将text-align: center;应用于面板，则可以获得所需的效果。否则你可以在页面上display: inline;，但为此你也可以去<span>

Answer 2

您是否必须使用div作为数字？

我将替换那些带有跨度的div，然后将text-align：center应用于outter div（.panel）

Answer 3

由于这是一个数字列表，您应该考虑将它们放在列表中以保证语义正确。将它们推入UL，使用CSS的风格，你是金色的。

也许这样：

<div class="panel">
 <ul>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
 </ul>
</div>

CSS中的样式如下：

.panel{text-align:center; }
.panel ul{list-style-type:none; margin:0 auto; padding:0; overflow:hidden; }
.panel li{display:inline; }
.panel li a{padding:5px; margin:0;}

使用填充和边距。在分页，标签和菜单中使用链接时，总是一个好主意。

在Opera 9，FF3，IE6，Chrome中测试

将div中的几个元素居中

3 个答案: