Can I Center an Inline-Block Element Without Using `display: table`?

CSS Centering Display Inline Block

Question:

In a working code, the center alignment of a wrap class is achieved using display: table. However, the user expresses a preference for using display: block or display: inline-block instead. The question arises: is there an alternative approach to achieving center alignment without relying on display: table?

Solution:

To address this, simply introduce text-align: center to the body and display: inline-block to the wrap class while eliminating the display: table property. This modification effectively centers the content within the wrap class without compromising the desired display: inline-block. Here's the modified CSS:

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

The above is the detailed content of Can I Center an Inline-Block Element Without Using `display: table`?. For more information, please follow other related articles on the PHP Chinese website!