Centering An Inline-Block DIV

Question

Does anybody know how to center align a DIV that has the display set to inline-block?

I cannot set the display to block because I have a background image that needs to be repeated, and it needs to expand based on the content. It sits inside of a parent div, in which is larger when it comes to width.

So all in all. Does anyone have a fix to center align a div with the display set to inline-block?

And no, text-align: center; does not work, nor does margin: 0 auto;

jsFiddle: http://jsfiddle.net/HkvzM/

Thank you!

Answer 1

Try using this:

margin: 0 auto;

Or text-align: center; on the parent <div>...

Answer 2

Hi you can give parent text-align center not child as like this

Css

div{
    text-align: center;

}

.dl{
    color: #fff;
    margin: 0 auto;
    background: #000;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;  
    line-height:35px;  
    display:inline-block;    
}

HTML

<div>
<a class="dl">DOWNLOAD NOW DOWNLOAD NOW DOWNLOAD NOW</a>    
</div>

Live demo here http://jsfiddle.net/rohitazad/HkvzM/15/