Question

我有一个两列列表，但左边是合理的。如何使其在页面上居中？

这是我的jsfiddle： http://jsfiddle.net/huskydawgs/c2yqmfzt/5/

<p>
A banana is an edible fruit, botanically a berry,[1][2] produced by several kinds of large herbaceous flowering plants in the genus Musa.[3] (In some countries, bananas used for cooking may be called plantains.) The fruit is variable in size, color and firmness, but is usually elongated and curved, with soft flesh rich in starch covered with a rind which may be green, yellow, red, purple, or brown when ripe.</p>

<ul class="two-col-special">
    <li>First Category</li>
    <li>Second Category</li>
    <li>Third Category</li>
    <li>Fourth Category</li>
    <li>Fifth Category</li>
</ul>

<p>
    Worldwide, there is no sharp distinction between "bananas" and "plantains". Especially in the Americas and Europe, "banana" usually refers to soft, sweet, dessert bananas, particularly those of the Cavendish group, which are the main exports from banana-growing countries. By contrast, Musa cultivars with firmer, starchier fruit are called "plantains". In other regions, such as Southeast Asia, many more kinds of banana are grown and eaten, so the simple two-fold distinction is not useful and is not made in local languages.</p>

这是CSS：

.two-col-special {
margin: 0;
padding: 0;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Answer 1

您可能寻找的是：

.two-col-special { text-align:center; }

那很简单。

我更新了你的小提琴here

修改

正如40Alpha所说，如果你想保持列的顺序，你可以在无序列表的底部添加一个空白列表项。第二个小提琴here将显示可能的修复。

.two-col-special {
    margin: 0;
    padding: 0;
    text-align:center;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

ul:nth-child(even) {
    padding-left:20px;   
}

<ul class="two-col-special">
    <li>First Category</li>
    <li>Second Category</li>
    <li>Third Category</li>
    <li>Fourth Category</li>
    <li>Fifth Category</li>
    <li></li>
</ul>

如果您想在列之间添加20px填充，可以使用css'nth-child选择器：

ul:nth-child(even) {
    padding-left:20px;   
}

这将隔离您的second和fourth列表项，方法是获取偶数项，并在左侧添加填充。另请注意，这也将获得您的空列表项。

Answer 2

您需要应用CSS设置：

text-align:center;

到容器，在本例中为.two-col-special类

如何将列表与区域中心对齐？

2 个答案:

修改