Can Inline-Block with Text-Align: Center Replace Display: Table for Horizontal Centering?

Center Display with Inline Block: An Alternative Solution

When aligning elements horizontally centered with wrap, the common approach is to use display: table for the wrapper. However, some may prefer a solution utilizing display: block or display: inline-block.

The initial solution presented an issue: "wrap" required display: table to achieve the desired alignment. A modified approach emerged with the introduction of text-align: center applied to the body element and display: inline-block assigned to the wrap. By removing display: table, we arrive at an alternative solution that effectively aligns elements centered without imposing a fixed width limitation.

Updated Code:

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

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

This modification retains the desired alignment while offering a cleaner and potentially preferred approach for certain scenarios.

The above is the detailed content of Can Inline-Block with Text-Align: Center Replace Display: Table for Horizontal Centering?. For more information, please follow other related articles on the PHP Chinese website!