我的标签左对齐...如何将它们移到中心？

Question

我不喜欢左边的标签，而是喜欢它们在中间。我试过text-align：center;甚至设置margin-left：0和margin-right：0但都不起作用。如果不重写整个代码，最简单的方法是什么？

这是我的傻瓜： http://jsfiddle.net/huskydawgs/vm4d3a1q/25/

这是我的HTML：

    <ul class="nav-tabs">
    <li>
        <input checked="checked" id="tab-1" name="tabs" type="radio" /> <label for="tab-1">First</label>
        <div class="nav-tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.</p>
            <p>Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.</p>
            <p>Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
            <p>Quis eveniet delectus, earum rerum asperiores ducimus quos eaque ex tenetur corporis ullam hic quasi magni laborum necessitatibus impedit voluptates! Deleniti fuga aliquam ex. Reiciendis necessitatibus, obcaecati et labore aliquid.</p>
            <p>Fuga odit at nostrum molestias, inventore deserunt tempore quae cupiditate nulla voluptatem earum doloribus quia iste, eum dignissimos totam similique ea unde asperiores! Vero unde rem laboriosam repellat sunt. Vel.</p>
            <p>Qui nobis praesentium in. Natus quisquam in repudiandae laborum saepe excepturi veniam dicta vitae porro qui at obcaecati dolorum amet eligendi asperiores quia velit eum, aut libero itaque quidem numquam.</p>
            <p>Similique repellendus blanditiis ratione odio ducimus cupiditate laborum maiores a explicabo molestias voluptas tenetur, sed sit inventore officia mollitia iusto doloremque accusamus provident cum obcaecati dolores. Saepe enim natus perferendis.</p>
            <p>Aut perspiciatis eum explicabo odio aspernatur laboriosam impedit atque doloremque at, quo. Dolore fugiat et cupiditate accusamus consectetur illum error ut saepe, explicabo laudantium, perspiciatis ea similique libero, ullam molestiae?</p>
            <p>Impedit obcaecati sequi a maxime eos fuga accusantium, labore molestias voluptas dolor sapiente dolore error ipsa vero quisquam inventore vitae quam assumenda quibusdam unde at hic? Facere possimus itaque doloremque!</p>
            <p>Corrupti obcaecati recusandae, doloribus quasi. Laboriosam aspernatur sequi voluptatibus, consequuntur. Similique nam omnis at molestias porro consectetur quo saepe, dolorem repellat perspiciatis quibusdam architecto cupiditate provident error praesentium ex unde!</p>
        </div>
    </li>
    <li>
        <input id="tab-2" name="tabs" type="radio" /> <label for="tab-2">Second</label>
        <div class="nav-tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quae quas nemo veniam ullam magnam dolorum vero! Quod animi a, quidem nostrum, explicabo laboriosam distinctio ea sint recusandae, et voluptatibus.</p>
        </div>
    </li>
    <li>
        <input id="tab-3" name="tabs" type="radio" /> <label for="tab-3">Third</label>
        <div class="nav-tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
        </div>
    </li>
    <li>
        <input id="tab-4" name="tabs" type="radio" /> <label for="tab-4">Fourth</label>
        <div class="nav-tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
        </div>
    </li>    
</ul>

这是我的css：

.nav-tabs{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}

.nav-tabs:after{
    content: "";
    clear: both;
    display: block;
    height: 242px;
}

.nav-tabs li{
float:left;
}

.nav-tabs li > input{
    display: none;
}

.nav-tabs li > label{
    display: inline-block;
    border: none;
    border-right-width: 0;
    border-bottom-width: 0;
    height: 30px;
    line-height: 30px;
    padding: 5px 20px;
    cursor: pointer;
}

.nav-tabs li:last-child > label{
    border-right-width: 1px;
}

.nav-tabs .nav-tab-content{
    display: none;
    position: absolute;
    left: 0;
    padding: 20px;
    border-top: 1px solid #e2e3e4;
    height: 200px;
}

/* Functional */

.nav-tabs li > input:checked + label{
    background-color: #2251a4;
    color: #fff;
}

.nav-tabs li > input:checked ~ .nav-tab-content{
    display: block;
}

Answer 1

以下是中心标签的中心方式：

1）从float移除.nav-tabs li并添加display: inline-block。

2）在text-align: center上使用.nav-tabs。

3）在text-align: left;

上使用.nav-tabs .nav-tab-content

通过.nav-tabs li显示inline-block，我们将它们设为内联元素，以便它们响应text-align: center。然后我们将text-align: left放在我们的内容上，这样它就不会继承中心文本对齐。

现场演示：

.nav-tabs{
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: relative;
    text-align: center;
}

.nav-tabs:after{
	content: "";
	clear: both;
	display: block;
	height: 242px;
}

.nav-tabs li{
display: inline-block;
}

.nav-tabs li > input{
	display: none;
}

.nav-tabs li > label{
	display: inline-block;
	border: none;
	border-right-width: 0;
	border-bottom-width: 0;
	height: 30px;
	line-height: 30px;
	padding: 5px 20px;
	cursor: pointer;
}

.nav-tabs li:last-child > label{
	border-right-width: 1px;
}

.nav-tabs .nav-tab-content{
	display: none;
	position: absolute;
	left: 0;
	padding: 20px;
	border-top: 1px solid #e2e3e4;
	height: 200px;
    text-align: left;
}

/* Functional */

.nav-tabs li > input:checked + label{
	background-color: #2251a4;
    color: #fff;
}

.nav-tabs li > input:checked ~ .nav-tab-content{
	display: block;
}

<ul class="nav-tabs">
	<li>
		<input checked="checked" id="tab-1" name="tabs" type="radio" /> <label for="tab-1">First</label>
		<div class="nav-tab-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.</p>
			<p>Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.</p>
			<p>Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
			<p>Quis eveniet delectus, earum rerum asperiores ducimus quos eaque ex tenetur corporis ullam hic quasi magni laborum necessitatibus impedit voluptates! Deleniti fuga aliquam ex. Reiciendis necessitatibus, obcaecati et labore aliquid.</p>
			<p>Fuga odit at nostrum molestias, inventore deserunt tempore quae cupiditate nulla voluptatem earum doloribus quia iste, eum dignissimos totam similique ea unde asperiores! Vero unde rem laboriosam repellat sunt. Vel.</p>
			<p>Qui nobis praesentium in. Natus quisquam in repudiandae laborum saepe excepturi veniam dicta vitae porro qui at obcaecati dolorum amet eligendi asperiores quia velit eum, aut libero itaque quidem numquam.</p>
			<p>Similique repellendus blanditiis ratione odio ducimus cupiditate laborum maiores a explicabo molestias voluptas tenetur, sed sit inventore officia mollitia iusto doloremque accusamus provident cum obcaecati dolores. Saepe enim natus perferendis.</p>
			<p>Aut perspiciatis eum explicabo odio aspernatur laboriosam impedit atque doloremque at, quo. Dolore fugiat et cupiditate accusamus consectetur illum error ut saepe, explicabo laudantium, perspiciatis ea similique libero, ullam molestiae?</p>
			<p>Impedit obcaecati sequi a maxime eos fuga accusantium, labore molestias voluptas dolor sapiente dolore error ipsa vero quisquam inventore vitae quam assumenda quibusdam unde at hic? Facere possimus itaque doloremque!</p>
			<p>Corrupti obcaecati recusandae, doloribus quasi. Laboriosam aspernatur sequi voluptatibus, consequuntur. Similique nam omnis at molestias porro consectetur quo saepe, dolorem repellat perspiciatis quibusdam architecto cupiditate provident error praesentium ex unde!</p>
		</div>
	</li>
	<li>
		<input id="tab-2" name="tabs" type="radio" /> <label for="tab-2">Second</label>
		<div class="nav-tab-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quae quas nemo veniam ullam magnam dolorum vero! Quod animi a, quidem nostrum, explicabo laboriosam distinctio ea sint recusandae, et voluptatibus.</p>
		</div>
	</li>
	<li>
		<input id="tab-3" name="tabs" type="radio" /> <label for="tab-3">Third</label>
		<div class="nav-tab-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
		</div>
	</li>
	<li>
		<input id="tab-4" name="tabs" type="radio" /> <label for="tab-4">Fourth</label>
		<div class="nav-tab-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
		</div>
	</li>    
</ul>

JSFiddle版本：http://jsfiddle.net/vm4d3a1q/26/