Helaas lukt het me niet de onderstaande div's goed te centeren

<div class="box">
<a href="cv.html" >
<div class="vak">
<img src="images/cv.jpg"></img>
<p>Curriculum Vitae</p>
</div>
</a>
<a href="portfolio.html" >
<div class="vak">
<img src="images/portfolio.jpg"></img>
<p>Portfolio</p>
</div>
</a>
<a href="persoonlijke.html" >
<div class="vak">
<img src="images/competenties.jpg"></img>
<p>Competenties</p>
</div>
</a>
</div>
.box {
text-align: center;
white-space: nowrap;
overflow: hidden;
width: 980px;
margin-bottom: 5px;
}
.box a:hover {
border: 0;
}
.vak {
float: left;
width: 250px;
height:230px;
border: 1px solid #DBDBDB;
border-radius:5px;
text-align: normal;
vertical-align: middle;
color: #000;
margin-right:10px;
margin-bottom: 10px;
z-index:1;
}
.vak img {
width: 250px;
height: 200px;
}
.vak p {
margin:5px 0px 15px 0px;
font-size: 15px;
font-weight:bold;
}
/* IE */
.vak {
*display: inline;
*margin: 0 20px;
}