ディスプレイと水平に整列する方法：インラインブロック

Question

非常にシンプルですが、テキスト上にdisplay:inline-blockを使用している間は、親要素にテキストを水平に配置できません。私はdisplay:inline-blockである必要があるので、テキストの周りに境界線を作成して、テキストのサイズにする必要があります。NOT親です。

境界線を作るもう1つの方法はありますか？テキストにテキストの幅を与え、親を使わない方法はありますか？

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

ブートストラップも

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

Answer 3

は試してみてください "の.text-センター" と呼ばれるアライメントクラスでこれを達成するための簡単な方法があります

display: inline-table; 

の代わりに

display: inline-block;