如何与显示水平对齐：内嵌

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;