How to Vertically Align Inline/Inline-Block Elements Within a Div?

CSS Vertical Alignment of Inline/Inline-Block Elements

When attempting to vertically align inline or inline-block elements within a div, it's crucial to note that the vertical-align property pertains to the child elements, not the parent. In the provided HTML and CSS, the span stubbornly shifts down due to the vertical alignment being applied to the div element.

To properly align the elements vertically, apply the vertical-align property to the child elements within the div:

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

This modification will ensure that all inline and inline-block elements within the div align vertically as intended: [https://jsfiddle.net/dfmx123/TFPx8/1186/](https://jsfiddle.net/dfmx123/TFPx8/1186/)

Additional Note:

Vertical alignment is relative to the current text line, not the height of the parent div. To achieve vertical centering within a div taller than the aligned elements, set the div's line-height property instead of its height. Refer to the updated provided JSFiddle example for a demonstration.

The above is the detailed content of How to Vertically Align Inline/Inline-Block Elements Within a Div?. For more information, please follow other related articles on the PHP Chinese website!