Button Link Formatting - Center and Match Width

Button Link Formatting - Center and Match Width

I've created a couple of simple buttons using a link and some CSS to give
it a background and I'm trying to center it on my page. However, because
the text in one of the buttons is longer than the other, the buttons are
of different sizes and for consistency, I'd like them to be the same
width.
How can I keep these buttons the same size? Trying to float them and use
percentage widths results in them not being centered. The relevant markup
is below.
<section class="buttonsSection">
<a class="button" href="#">Very Long Sentence</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 10px 15px;
background-color: deepskyblue;
color: white;
}
.buttonsSection{
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.buttonsSection a {
margin: 3px;
}
JSFiddle: http://jsfiddle.net/Dragonseer/BzQ8e/