How to Center Inline-Block Using CSS

1. Use the text-align CSS Property to Center the Inline-Block
2. Use the justify-content and display CSS Properties to Center the Inline-Block
3. Use the left, position, and transform CSS Property

In this article, we will create multiple HTML elements and set their display to inline-block. After that, we will learn to center all elements with display: inline-block.

Use the text-align CSS Property to Center the Inline-Block

In this example, we have created the <div> element with the parent class name. Inside that <div> element, we have added 3 more <div> elements with the same class name called child.

Also, we have given a different background-color to every <div> element with the class name child.

Here, we have set the display:inline-block for every element with the class name child. To center all elements, we have applied the text-align: center property to the parent <div> element with the class name parent.

In the output, users can see that all three child <div> elements are centered on the web page.

HTML Code:

<div class="parent">
    <div class="child" style="background-color: green">First</div>
    <div class="child" style="background-color: red">Second</div>
    <div class="child" style="background-color: blue">Third</div>
</div>

CSS Code:

.parent {
    text-align: center;
}
.child {
    display: inline-block;
    font-size: 30px;
}

Use the justify-content and display CSS Properties to Center the Inline-Block

We will use the justify-content and display CSS properties in this part. We can use the center value for the justify-content property to center the element’s entire content.

For example, we have created the <div> element with the class name container. After that, we added three <p> tags with some text inside the <div> element.

To show all the paragraphs in a single row, we can use the CSS display: flex property instead of display:inline-block. To center all the <p> elements at once, we have applied the justify-content: center property to the container class, which is the parent class of all <p> elements.

HTML Code:

<div class="container">
    <p style="background-color: green">Welcome</p>
    <p style="background-color: red">To The</p>
    <p style="background-color: blue">DelftStack</p>
</div>

CSS Code:

.container {
    font-size: 30px;
    display: flex;
	flex-direction: row;
    justify-content: center;
}

Use the left, position, and transform CSS Property

We will use the left, position, and transform CSS properties to center all elements with display: inline-block. The left property allows us to set the element’s left position.

The transform property moves the element from its position according to our requirements. We can use the position property to specify the positioning method of the element.

For example, we have created a <div> with the outer class name, and our code contains some <p> elements with the inner class name. For all elements with the inner class name, we have used the display: inline-block to show them inline.

We have used left: 50% for the outer class and set its position to absolute to move the whole <div> related to its parent element, which is the body element. After that, we used the transform: translate(-50%) property to move the <div> element with the class name outer in the negative-x direction by the 50% width of itself.

This way, we can center the <div> element with the outer class name.

HTML Code:

<div class="outer">
    <p class="inner" style="background-color: green">ABCD</p>
    <p class="inner" style="background-color: red">EFG</p>
    <p class="inner" style="background-color: blue">HIJ</p>
</div>

CSS Code:

.outer {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.inner {
    font-size: 30px;
    display: inline-block;
}

In this article, we have learned various methods to center the elements with display: inline-block.