How to Center Multiple Inline-Block Elements with CSS

How to center multiple inline-block elements with CSS?

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

How can I vertically center multiple inline-block divs in a div?

Add a vertical-align value to your elements.

.teszt {
  vertical-align: top; // or middle
}

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

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>

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>

How to center two inline-block p in a div container?

Add text-align: center; to div Tag

div {    width: 200px;    height: 50px;    border: 1px solid black;    text-align: center;}p {    display: inline-block;}.first {    color: red;}.second {    color: blue;}

<div>    <p class="first">one</p>    <p class="second">two</p></div>

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.

How to center multiple divs inside a container in CSS

My previous answer showed a frankly outdated method (it still works, there are just better ways to achieve this). For that reason, I'm updating it to include a more modern, flexbox solution.

See support for it here; in most environments, it's safe to use.

This takes advantage of:

display: flex: Display this element with flexbox behaviour
justify-content: center Align the inner elements centrally along the main axis of the container
flex-wrap: wrap Ensure the inner elements automatically wrap within the container (don't break out of it)

_{Note: As is usual with HTML & CSS, this is just one of many ways to get the desired result. Research thoroughly before you choose the way that's right for your specifications.}

.container {    display: flex;    justify-content: center;    flex-wrap: wrap;    width: 70%;    background: #eee;    margin: 10px auto;    position: relative;    text-align:center;}
.block {    background: green;    height: 100px;    width: 100px;    margin: 10px;}

<div class="container">    <div class="block">1. name of the company</div>    <div class="block">2. name of the company</div>    <div class="block">3. name of the company</div>    <div class="block">4. name of the company</div>    <div class="block">5. name of the company</div>    <div class="block">6. name of the company</div>    <div class="block">7. name of the company</div>    <div class="block">8. name of the company</div></div>

How to Center Multiple Inline-Block Elements with CSS