Centering An Inline

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!

---

Try using this:

margin: 0 auto;

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

---

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/

---

You can not center an element with

display:inline

You might have to find a work around by using jQuery or JavaScript. You can do some approximate centering with CSS which will work if the text does not change that much in length. Something like this Demo

<div id="out">
    <a class="dl">DOWNLOAD NOW DOWNLOAD NOW DOWNLOAD NOW</a>
</div>​​​

#out{
 padding:0 50px;   
}

链接地址: http://www.djcxy.com/p/75668.html

上一篇: 在IE中没有DOCTYPE的块不起作用

下一篇: 集中联机