How to Center Block of Inline-Blocks

CSS center display inline block?

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>

Aligning inline-block center

Like this? http://jsfiddle.net/bcL023ko/3/
Remove the float:left left and add margin: 0 auto to center the element. Or is it something else that your are looking for?

Making center a inline-block

It's hard to be certain without seeing the surrounding code, but try moving the #main-wraper and #main-column elements out of the @foreach loop.

<div id="main-wrapper">
    <div id="main-column">
        @foreach($estates as $estate)
            <div class="sub-column">
                <img id="image" src="{{$estate->image}}">
            </div>
            <div class="sub-column">
                Content
            </div>
            <div class="sub-column">
                Buttons
            </div>
        @endforeach
    </div>
</div>

Be aware that an id attribute is supposed to be a unique value on the page. #image is currently not unique if there's more than one $estate. Consider using a class attribute on the <img> elements instead.

Center multiple inline blocks with CSS and align the last row to the left

Found a quite simple solution to this problem: just add some filler divs at the end, which are of the same width with the blocks that are aligned.

http://jsfiddle.net/5JSAG/34/

HTML:

<div style="text-align:center">
    <div class="entry">1</div>
    <div class="entry">2</div>
    <div class="entry">3</div>
    <div class="entry">4</div>
    <div class="entry">5</div>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
    <span class="fill"></span>
</div

CSS:

.fill
{
    display:inline-block;
    width:100px;
    height:0px;
    line-height:0px;
    font-size:0px;
}

.entry 
{ 
    display:inline-block;
    margin-top:10px;
    width:100px;
    height:60px;
    padding-top:40px;
    border:1px solid red;
}

How to center inline-block element with margin

If you use a container with negative margin, you don't need to vary the margin for the endpoints of the rows at different breakpoints and you can just go with inline-block. I set font-size to zero in the container so I can calculate my widths using percents without worrying about white space.

div#wrap {  margin-top: 3em;  border: solid 1px black;  padding: 20px;  text-align: center;}
.block {  display: inline-block;  width: 12.5em;  margin: 20px;  height: 8em;  font-size: 16px;}
.block-container {  margin: -20px;  font-size: 0;}
#block1 {  background: orange;}
#block2 {  background: magenta;}

<div id="wrap">  <div class="block-container">    <div class="block" id="block1"></div>    <div class="block" id="block2"></div>  </div></div>

Center grid of inline-blocks within container

As far as I know, this cannot be done without JS. The problem lies with the "wrap" element. In order to center it(and it's contents), the width most not be 100%. However, if you set a fixed width, then the element is no longer fluid.

So basically you can only horizontally center float:left or display:inline-block elements with a "shrink-wrap" effect only if it doesn't reach 100% of it's parent. Once it breaks down to a second line, it's no longer centered.

As you can see from this example in the Fiddle, it cannot be done.

Fiddle: http://jsfiddle.net/gzB5k/4/

Center inline-blocks with dynamic width in CSS

If I understood you correctly adding text-align: center to your .wrapper styles should give the desired effect. See this fiddle for an example. Resize the result panel to watch the reordering of the boxes.

Like Akaishen already mentioned inline-blocks flow like text. That's why you can control their alignment with text-align. However if you want very fine control over your layout you might run into problems using inline-blocks. Since they flow like text whitespace between them is not ignored for instance. And unfortunately you can't really determine the absolute width of a space across browsers and OSs. The gaps between blocks in my example are caused by this.

Centering An Inline-Block DIV

Try using this:

margin: 0 auto;

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

Align a set of inline-blocks by a middle element

You could do it this way:

.elements-row {    height: 140px;    display: block;    text-align: center;    overflow: hidden;}
.elements-row .element {    display: inline-block;    font-size: 10px;    color: #abb8c2;    margin: 0 15px;}
.elements-row .element.featured {    margin: 0 40px;    color: #4a667f;}
.elements-center {    display: inline-block;    position: relative;}
.elements-left {    top: 0;    position: absolute;    right: 100%;    white-space: nowrap;}
.elements-right {    top: 0;    position: absolute;    left: 100%;    white-space: nowrap;}

<div class="elements-row">    <div class="elements-center">        <div class="elements-left">            <div class="element">January</div>            <div class="element">February</div>            <div class="element">March</div>        </div>        <div class="element featured">April</div>        <div class="elements-right">            <div class="element">May</div>            <div class="element">June</div>            <div class="element">July</div>        </div>    </div></div>