How Can I Evenly Distribute Inline-Block Elements with `text-align: justify`?

Can ""text-align: justify;"" Inline-Block Elements Spread Out Evenly?

Problem:

Inline-block elements with text-align: justify struggle to distribute content evenly, leaving an empty vertical space at the bottom of the line. Traditional solutions involve using line-height: 0; on the parent element, which can disrupt existing line-height values.

Workaround for Present Browsers (IE8 , FF, Chrome):

This CSS method solves the problem without disrupting line-heights:

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* Your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* Your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

The :before element pulls text lines up one line-height, eliminating the extra line but displacing text. Positioning inline-block elements relative counteracts this displacement without adding an extra line.

Future Solution with "-text-align-last: justify;" (Nearing Support):

A cleaner future solution uses:

.prevNext {
    text-align: justify;
    text-align-last: justify; /* Supported in IE and FF, experimental in Chrome */
}

In-Progress Webkit Support:

Webkit browsers partially support this solution but require enabling experimental features. Full support is expected in upcoming versions.

The above is the detailed content of How Can I Evenly Distribute Inline-Block Elements with `text-align: justify`?. For more information, please follow other related articles on the PHP Chinese website!