CSS center display inline block?

Question

I have a working code here: http://jsfiddle.net/WVm5d/ (you might need to make the result window bigger to see the align center effect)

Question

The code works fine but I don't like to have display: table;. It's the only way I could make the wrap-class align center. I think it would be better if there was a way to use display: block; or display: inline-block;. Is it possible to solve the align center another way?

Adding a fixed with to the container is not an option for me.

I will also paste my code here if the JS Fiddle link gets broken in the future:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

Bazzz · Accepted Answer · 2011-02-12 21:00:50Z

291

Try this. I added text-align: center to body and display:inline-block to wrap, and then removed your display: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

answered Feb 12, 2011 at 21:00

Bazzz

27k12 gold badges55 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

User2 Over a year ago

@zack divs work like text when displayed as inline-block. You can use stuff like white-space: nowrap; on them too.

phil294 Over a year ago

and what if I don't want ALL of my elements placed in body to be text-aligned center?? this sounds like a huge overkill to me

Arsalan Sheikh Over a year ago

@Blauhirn, just make a block wrapper arround inline-block element and then set css property text-align:center; he use body tag as example.

EdA · Accepted Answer · 2021-02-09 00:51:42Z

126

The accepted solution wouldn't work for me as I need a child element with display: inline-block to be both horizontally and vertically centered within a 100% width parent.

I used Flexbox's justify-content and align-items properties, which respectively allow you to center elements horizontally and vertically. By setting both to center on the parent, the child element (or even multiple elements!) will be perfectly in the middle.

This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.

Here is a CodePen demo and a snippet of the relevant code below:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

edited Feb 9, 2021 at 0:51

answered Mar 15, 2018 at 17:38

EdA

1,4121 gold badge10 silver badges10 bronze badges

6 Comments

Jens Törnell Over a year ago

This question was created before Flexbox but now this approach is better so, I accepted it as the answer.

Temani Afif Over a year ago

@JensTörnell the use of inline-block is useless in this case it can be removed

Trace Over a year ago

This is much better than using text-align center. That implementation just leaks text-centering to all child components. Don't do it.

EdA Over a year ago

@TemaniAfif was right - thanks. I didn't need to have a display: inline-block; rule in there (I thought it was integral, but it indeed isn't) so I've removed that.

Logan Cundiff Over a year ago

This isn't an inline block anymore though? It is centering a flex item which is a different question altogether.

|

thirtydot · Accepted Answer · 2011-07-11 14:56:22Z

79

If you have a <div> with text-align:center;, then any text inside it will be centered with respect to the width of that container element. inline-block elements are treated as text for this purpose, so they will also be centered.

edited Jul 11, 2011 at 14:56

thirtydot

229k51 gold badges393 silver badges354 bronze badges

answered Feb 12, 2011 at 21:00

Spudley

169k39 gold badges240 silver badges309 bronze badges

1 Comment

geckob Over a year ago

How about display:inline elements? I tested it is not working the way I am expecting it to be

CodeBiker · Accepted Answer · 2021-11-02 17:22:01Z

32

This will horizontally center an inline-block element without needing to modify its parent's styles:

  display: inline-block;
  position: relative;
  /* Move the element to the right by 50% of the container's width */
  left: 50%; 
  /* Calculates 50% of the element's width, and moves it by that */ 
  /* amount across the X-axis to the left */
  transform: translateX(-50%);

edited Nov 2, 2021 at 17:22

answered Mar 5, 2020 at 20:44

CodeBiker

3,3333 gold badges37 silver badges37 bronze badges

Comments

vijayscode · Accepted Answer · 2017-09-15 01:58:32Z

15

You can also do this with positioning, set parent div to relative and child div to absolute.

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

edited Sep 15, 2017 at 1:58

answered Apr 22, 2017 at 5:35

vijayscode

2,0255 gold badges24 silver badges38 bronze badges

Comments

user2166297 · Accepted Answer · 2013-08-12 14:08:40Z

1

You don't need to use "display: table". The reason your margin: 0 auto centering attempt doesn't work is because you didn't specify a width.

This will work just fine:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

You don't need to specify display: block since that div will be block by default. You can also probably lose the overflow: hidden.

answered Aug 12, 2013 at 14:08

user2166297

Comments

mylesagray · Accepted Answer · 2011-02-12 23:48:17Z

-4

I just changed 2 parameters:

.wrap {
    display: block;
    width:661px;
}

Live Demo

answered Feb 12, 2011 at 23:48

mylesagray

8,8897 gold badges50 silver badges71 bronze badges

3 Comments

Jens Törnell Over a year ago

Setting a fixed with is not an option for me. Found another solution. Thanks anyway.

RichieHH Over a year ago

So what was it?

daniel souza Over a year ago

It is not a responsive centering of inline blocks.

Mitch · Accepted Answer · 2014-02-16 09:31:24Z

-6

Great article i found what worked best for me was to add a % to the size

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

edited Feb 16, 2014 at 9:31

answered Aug 12, 2013 at 13:56

Mitch

12 bronze badges

Comments

user2694412 · Accepted Answer · 2013-08-18 18:09:56Z

-10

Just use:

line-height:50px

Replace "50px" with the same height as your div.

answered Aug 18, 2013 at 18:09

user2694412

111 bronze badge

3 Comments

Marcel Gwerder Over a year ago

Please be more specific in where to add line-height.

cdaddr Over a year ago

The original question was about horizontal centering, as indicated by the use of text-align: center;. Adjusting line-height is a solution for vertical centering, though not a very robust solution for an inline-block.

tree Over a year ago

This doesn't even relate.

Collectives™ on Stack Overflow

CSS center display inline block?

9 Answers 9

3 Comments

6 Comments

1 Comment

Comments

Comments

Comments

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

6 Comments

1 Comment

Comments

Comments

Comments

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related