css - 如何如图所示将框居中？

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