html - 如何水平对齐显示:inline-block

Question

看起来 super 简单，但在文本上使用 display:inline-block 时，我无法将文本水平居中放置在父元素中。我需要它是 display:inline-block 因为我希望我创建的文本周围的边框是文本的大小并且 NOT 父级。

有没有另一种方法可以使边框我给文本宽度而不是父文本的宽度？

    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

能这么简单吗？

.row {
    text-align: center;
}

fiddle 示例:https://jsfiddle.net/rczfnf6d/