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!

"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." Both of these are possible for block elements. Show us an example of what you're trying to do. — ceejayoz, Apr 12 '12 at 21:42
@ceejayoz: I updated my question with the link to the jsFiddle. Thank you! — Aaron Brewer, Apr 12 '12 at 21:49

score 17 · Accepted Answer · answered Apr 12 '12 at 21:41

17

Try using this:

margin: 0 auto;

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

answered Apr 12 '12 at 21:41

Frederick Marcoux

2,195
1
26
57

The Parent Div cannot have either of those seeing as it is a floated element and the elements within it cannot be aligned via center. – Aaron Brewer Apr 12 '12 at 21:50
3

actually, float doesn't prevent that from happening. text-align:center works here: http://jsfiddle.net/HkvzM/3/ it's in a floated div. the problem is that you have to give a width to the parent. I think we need more info on the parent structure to figure out what you need. – Ege Apr 12 '12 at 22:06
4

margin: 0 auto; on the inline block div does not seem to work. – Sir Sep 05 '15 at 03:44

score 2 · Answer 2 · answered Apr 13 '12 at 05:26

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/

TheTechGuy · Answer 3 · 2012-04-19T12:50:34.803

1

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

edited Apr 19 '12 at 12:50

answered Apr 13 '12 at 01:25

TheTechGuy

16,560
16
115
136

score 0 · Answer 4 · edited May 23 '17 at 12:16

0

text-align:center on the parent div , will simply do the trick.
source : CSS center display inline block?

edited May 23 '17 at 12:16

Community

1
1

answered Jun 05 '15 at 11:46

Gurjit

564
1
9
19

score 0 · Answer 5 · edited May 04 '18 at 14:40

What I've gotten from all of these (many, multitude, gobs of) answers is that you cannot center a block with an inline style call. It must be a defined class. Here's the canary:

<div
  style="font-size: 14pt; text-align: center; font-family: latoweb; font-weight: 400; display: inline-block; margin: 0 auto; width: 80%; height: auto;"
>
  <a
    id="media_comment_m-4JGUVJ6vm4uhihPBSiXrZGRG2Fm1a8To"
    data-media_comment_type="video"
    class="instructure_inline_media_comment video_comment mce-item-anchor"
    data-alt=""
  >
  </a>
  5 Quick Steps to <i>Photo Story 3</i>
</div>

Trying to center a video frame inside of Canvas LMS. Must pass their whitelist test.

Centering An Inline-Block DIV

5 Answers5