Css Center Display Inline Block

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?

Aligning a div to the center with display: inline-block

Add body {text-align:center;} to make the div centered on the page.

Or you can wrap this div in another div with a width of 100% and text-align center.

Is it possible to center an inline-block element and if so, how?

Simply set text-align: center; on the container.

Here's a demo.

center a block in which it is applied display inline-block

Add a text-align: center to the container of the div:

<div style="text-align: center">
    <div style="display: inline-block">
       <img src="..."/>
    </div>
</div>

DEMO

Centering An Inline-Block DIV

Try using this:

margin: 0 auto;

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

Css Center Display Inline Block