Vertical align middle on inline elements slightly off

Question

Aryan Kumar · Answer

When attempting to vertically align inline elements, it is common for the alignment to be slightly off due to the default vertical alignment behavior of inline elements. Here are a few tips for achieving more accurate vertical alignment of inline elements:

1. Use the line-height property: One approach is to use the `line-height` property of the parent element to match the height of the inline elements. For example:

  .parent {
    line-height: 40px; /* set line-height to match height of inline elements */
  }
  .child {
    display: inline-block;
    vertical-align: middle;
  }

In this example, the `line-height` property of the parent element is set to `40px` to match the height of the inline elements. The `vertical-align` property of the inline elements is set to `middle` to vertically align them.

2. Use flexbox: Another approach is to use flexbox to center the inline elements. For example:

  .parent {
    display: flex;
    align-items: center;
  }
  .child {
    display: inline-block;
  }

In this example, the `display` property of the parent element is set to `flex` to enable flexbox layout. The `align-items` property is set to `center` to center the inline elements vertically. The `display` property of the inline elements is set to `inline-block` to allow them to be centered.

3. Use tables: A third approach is to use a table layout to center the inline elements. For example:

  .parent {
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }

In this example, the `display` property of the parent element is set to `table-cell` to enable table layout. The `vertical-align` property is set to `middle` to center the inline elements vertically. The `display` property of the inline elements is set to `inline-block` to allow them to be centered.

Overall, the approach you choose may depend on your specific use case and the browser compatibility you require.

forum

Vertical align middle on inline elements slightly off

Can you answer this question?

1 Answers