How Can I Vertically Align Inline and Inline-Block Elements in CSS?

Vertical Alignment of Inline and Inline-Block Elements in CSS: Addressing Misalignment Issues

Vertical alignment of inline and inline-block elements within a container div can pose a challenge. As highlighted in the example provided, where a span element appears to be pushed down, manipulating the vertical-align property solely on the parent div (div) does not yield the desired result.

Cause of Misalignment:

The vertical-align property affects the alignment of the elements being vertically aligned, not their parent element. Hence, setting vertical-align:middle; or vertical-align:top; on the div only affects its own alignment and not the elements within it.

Solution:

To vertically align the child elements of the div, apply the vertical-align property to them directly:

div > * {
    vertical-align:middle;  // Align children to middle of line
}

With this adjustment, each child element within the div will now be vertically aligned to the middle of the line.

Additional Note:

Remember that vertical-align pertains to the current text line, not the entire height of the parent div. If vertical centering is desired across the full height of the parent div, set the div's line-height property rather than its height. Refer to the provided JsFiddle link for an illustrative example.

The above is the detailed content of How Can I Vertically Align Inline and Inline-Block Elements in CSS?. For more information, please follow other related articles on the PHP Chinese website!