如何将框中心如图所示？

Question

http://jsfiddle.net/do4rdxgn/2/

HTML：

<div class = "semesters">

<a href="Semester2.html"> Semester 2</a>
<a href="Semester3.html"> Semester 3</a>
<a href="Semester4.html"> Semester 4</a>
</div>

CSS：

.semesters a {
    color:#D8DACF;
    background:black;
    font-size:30px;
    text-decoration: none;
    display:inline;
    padding:10px;   
}

如您所见，黑框与文本一起聚集在页面左侧。我想让这些黑盒看起来像这样。

我该怎么做？如果我将填充设置为等于数字，则黑框的大小会增加，我不希望这种情况发生。

Answer 1

尝试使用：

body {
    width: 100%;
}
.semesters {
    margin: 0 auto;
    width: 70%;
}
.semesters a {
    color:#D8DACF;
    background:black;
    font-size:30px;
    text-decoration: none;
    display:inline;
    padding:10px;
}

FIDDLE

Answer 2

试试这个：

.btn {
     background: #000000;
     background-image: -webkit-linear-gradient(top, #000000, #404040);
     background-image: -moz-linear-gradient(top, #000000, #404040);
     background-image: -ms-linear-gradient(top, #000000, #404040);
     background-image: -o-linear-gradient(top, #000000, #404040);
     background-image: linear-gradient(to bottom, #000000, #404040);
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0px;
     font-family: Arial;
     color: #ffffff;
     font-size: 23px;
     padding: 10px 20px 10px 20px;
     text-decoration: none;
}

.btn:hover {
     background: #292929;
     background-image: -webkit-linear-gradient(top, #292929, #000000);
     background-image: -moz-linear-gradient(top, #292929, #000000);
     background-image: -ms-linear-gradient(top, #292929, #000000);
     background-image: -o-linear-gradient(top, #292929, #000000);
     background-image: linear-gradient(to bottom, #292929, #000000);
     text-decoration: none;
 }

Answer 3

你可以试试这个：     .semesters     {          文本对齐：中心;     }

Answer 4

只需将<div>更改为<table>，然后将其设为width: 100%，就可以了！[/ p>

＆＃13;

＆＃13;

.semesters a {
	color:#D8DACF;
    background:black;
	font-size:30px;
	text-decoration: none;
	display:inline;
	padding:10px;
}
.semesters {
  width: 100%;
  }

＆＃13;

<table class="semesters"><tr>
<td><a href="Semester2.html"> Semester 2</a></td>
<td><a href="Semester3.html"> Semester 3</a></td>
<td><a href="Semester4.html"> Semester 4</a></td></tr>
</table>

＆＃13;

＆＃13;

＆＃13;

<table>会自动将<td> s在整个<table>的宽度上分开。

Answer 5

你尝试这样的保证金并设置保证金作为屏幕宽度小屏幕减少保证金和大屏幕增加保证金。

Demo

.semesters{
text-align:center;
}
.semesters a {
color:#D8DACF;
background:black;
font-size:30px;
text-decoration: none;
display:inline;
padding:10px;   
margin:0 1.5%;
}