How to horizontally align with display:inline-block - html

Question

Seems super simple but I am unable to horizontally center text in a parent element while using display:inline-block on the text. I need it to be display:inline-block because I want the border around the text I create to be the size of the text and NOT the parent.
Is there another way to make the border I give the text the width of the text and not the parent?
a.studio-nav {
font-family: 'brandon-reg';
font-weight: 900;
color: white;
font-size: 20px;
display: inline-block;
text-align: center;
margin:0 auto;
padding:7px 4px;
}
a.studio-nav:hover {
border:2px solid white;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
text-decoration: none;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row clearfix">
<div class="col-xs-4 col-md-4">
<a href="/" class="studio-nav">
text
</a>
</div>
<div class="col-xs-4 col-md-4">
<a href="/" class="studio-nav">
I want
</a>
</div>
<div class="col-xs-4 col-md-4">
<a href="/" class="studio-nav">
centered
</a>
</div>
</div>

Answer 1

Could it be as simple as this?
.row {
text-align: center;
}
Example fiddle: https://jsfiddle.net/rczfnf6d/

Answer 2

Bootstrap has also a quick way of achieving this with an alignment class called ".text-center"
<div class="col-xs-4 col-md-4 text-center"> <!-- class added-->
<a href="/" class="studio-nav">
text
</a>
</div>

Answer 3

Try
display: inline-table;
instead of
display: inline-block;