如何水平对齐 display:inline-block

Question

看起来超级简单，但在文本上使用 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/

Answer 2

Bootstrap 也有一种快速实现此目的的方法，即通过对齐 class 称为“.text-center”

<div class="col-xs-4 col-md-4 text-center"> <!-- class added-->
    <a href="/" class="studio-nav">
        text
    </a>
</div>

Answer 3

尝试

display: inline-table;

而不是

display: inline-block;