如何将清单与区域中心对齐？

Question

I have a two column list, but it's justified to the left. How do I make it centered on the page?

Here's my 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>

Here's the 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

What you're likely looking for is:

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

That simple.

I updated your fiddle here

Edit

As 40Alpha kindly noted, if you're wanting to keep your columns in order, you can add a blank list item at the bottom of your unordered list. A second fiddle here will show that potential fix.

 .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> 

If you're wanting to add 20px padding between columns, you can use css' nth-child selector:

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

This will isolate your second and fourth list items, by way of getting the even numbered items, and add padding on the left side to them. Note too that this will also get your empty list item.

Answer 2

You Need to apply the CSS Setting:

text-align:center;

to the container, in this case to the .two-col-special Class