Zurb Foundation中的居中列表 [英] Centering lists in Zurb Foundation
问题描述
在使用Zurb的Foundation 4时,我无法使内联列表居中.
I am having trouble centering inline lists when using Zurb's Foundation 4.
'text-center'和'centered'的预构建css类可用于其他元素,但不适用于列表.
The prebuilt css classes of 'text-center' and 'centered' work fine for other elements but not with lists.
对与图像有关的旧问题的评论具有相似的结果
A review of an older question concerning images has similar results.
这不起作用:
<div class="row">
<div class="large-12 columns text-center">
<ul class="inline-list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
</div>
</div>
但是,当删除此标记时确实有效(但显然不是首选标记):
However, when removing the this does work (but obviously is not preferred markup):
<div class="row">
<div class="large-12 columns text-center">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
<a href="#">Five</a>
</div>
</div>
您对这种样式如何影响列表有建议吗?
Do you have a suggestion on how lists can be affected by this style.
谢谢.
推荐答案
我认为这很简单,只需将以下内容添加到CSS文件中即可:
I think it is as simple as adding the following to your CSS file:
.inline-list{
display: table;
margin: 0 auto;
}
您还可以从列div中删除text-center
类.我创建了一个代码笔,例如 http://cdpn.io/rwJjf .我在示例中使用的是Foundation 5.0.3,但我认为这无关紧要.
You can also remove the text-center
class from your column div. I created a codepen, http://cdpn.io/rwJjf, as an example. I used Foundation 5.0.3 in my example, but I don't think it will matter.
以下是我使用的资源:
- Centering List Items Horizontally (Slightly Trickier Than You Might Think)
- display
- The display declaration
我希望能帮上忙.
这篇关于Zurb Foundation中的居中列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!