user2684452 user2684452 - 3 months ago 8
CSS Question

How to horizontally align with display:inline-block

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?

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

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;

}

Answer

Could it be as simple as this?

.row {
    text-align: center;
}

Example fiddle: https://jsfiddle.net/rczfnf6d/

Comments