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>

score 286 · Answer 1 · answered Feb 12 '11 at 21:00

286

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 '11 at 21:00

Bazzz

26,427
12
52
69

29

@zack divs work like text when displayed as inline-block. You can use stuff like `white-space: nowrap;` on them too. – User2 Jul 10 '14 at 09:46
6

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 – phil294 Apr 01 '16 at 20:40
6

@Blauhirn, just make a block wrapper arround inline-block element and then set css property text-align:center; he use body tag as example. – Arsalan Sheikh Oct 05 '16 at 06:08

EdA · Accepted Answer · 2021-02-09T00:51:42.830

119

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 09 '21 at 00:51

answered Mar 15 '18 at 17:38

EdA

1,345
1
9
9

1

This question was created before Flexbox but now this approach is better so, I accepted it as the answer. – Jens Törnell Mar 19 '18 at 07:32
@JensTörnell the use of inline-block is useless in this case it can be removed – Temani Afif Oct 27 '18 at 09:30
This is much better than using text-align center. That implementation just leaks text-centering to all child components. Don't do it. – html_programmer Jun 16 '19 at 22:06
@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. – EdA Feb 09 '21 at 00:52
This isn't an inline block anymore though? It is centering a flex item which is a different question altogether. – Logan Cundiff Sep 01 '22 at 19:39
@LoganCundiff My original answer had `display: inline-block` on the child but a comment pointed out it's unnecessary. I think the OP really wanted to vert. & hori. centre, no matter how. The child could still be displayed `inline-block` . – EdA Sep 02 '22 at 20:42

score 80 · Answer 3 · edited Jul 11 '11 at 14:56

80

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 '11 at 14:56

thirtydot

224,678
48
389
349

answered Feb 12 '11 at 21:00

Spudley

166,037
39
233
307

2

How about display:inline elements? I tested it is not working the way I am expecting it to be – geckob Aug 27 '15 at 14:59

CodeBiker · Answer 4 · 2021-11-02T17:22:01.943

27

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 02 '21 at 17:22

answered Mar 05 '20 at 20:44

CodeBiker

2,985
2
33
36

vijayscode · Answer 5 · 2017-09-15T01:58:32.693

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 '17 at 01:58

answered Apr 22 '17 at 05:35

vijayscode

1,905
4
21
37

score 1 · Answer 6 · answered Aug 12 '13 at 14:08

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.

score -3 · Answer 7 · answered Feb 12 '11 at 23:48

-3

I just changed 2 parameters:

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

Live Demo

answered Feb 12 '11 at 23:48

Myles Gray

8,711
7
48
70

8

Setting a fixed with is not an option for me. Found another solution. Thanks anyway. – Jens Törnell Feb 13 '11 at 06:41
2

So what was it? – RichieHH Jun 05 '17 at 17:37
1

It is not a responsive centering of inline blocks. – daniel souza Nov 16 '20 at 07:05

Mitch · Answer 8 · 2014-02-16T09:31:24.347

-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 '14 at 09:31

answered Aug 12 '13 at 13:56

Mitch

1
2

score -10 · Answer 9 · answered Aug 18 '13 at 18:09

-10

Just use:

line-height:50px

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

answered Aug 18 '13 at 18:09

user2694412

11
1

1

Please be more specific in where to add `line-height`. – Marcel Gwerder Aug 18 '13 at 18:30
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. – cdaddr Apr 29 '14 at 19:26
This doesn't even relate. – tree Sep 17 '20 at 15:42

CSS center display inline block?

9 Answers9

Linked

Related