Как горизонтально выровнять с дисплеем: 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"> 
 
    \t <div class="col-xs-4 col-md-4"> 
 
    \t \t <a href="/" class="studio-nav"> 
 
    \t \t \t text 
 
    \t \t </a> 
 
    \t </div> 
 
    \t <div class="col-xs-4 col-md-4"> 
 
    \t \t <a href="/" class="studio-nav"> 
 
    \t \t \t I want 
 
    \t \t </a> 
 
    \t </div> 
 
    \t <div class="col-xs-4 col-md-4"> 
 
    \t \t <a href="/" class="studio-nav"> 
 
    \t \t \t centered 
 
    \t \t </a> 
 
    \t </div> 
 
    </div>

Answer 1

Может быть так просто, как это?

.row { 
    text-align: center; 
} 

Пример скрипку: https://jsfiddle.net/rczfnf6d/

Answer 2

Bootstrap имеет также быстрый способ достижения этой цели с классом выравнивания называется ".text-центр"

<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; 

вместо

display: inline-block;