---
title: "Vertical align middle on inline elements slightly off"  
description: "Vertical align middle on inline elements slightly off"  
author: "Utpal Vishwas"  
published: 2023-04-25  
updated: 2023-04-26  
canonical: https://www.mindstick.com/forum/158009/vertical-align-middle-on-inline-elements-slightly-off  
category: "html"  
tags: ["html", "css", "css position"]  
reading_time: 2 minutes  

---

# Vertical align middle on inline elements slightly off

[Vertical](https://www.mindstick.com/forum/12951/how-to-fix-bootstrap-tab-vertical-with-text) align middle on [inline](https://www.mindstick.com/interview/1012/describe-the-difference-between-inline-and-code-behind) [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) slightly off

## Replies

### Reply by Aryan Kumar

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:

```css
  .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:

```css
  .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:

```css
  .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.


---

Original Source: https://www.mindstick.com/forum/158009/vertical-align-middle-on-inline-elements-slightly-off

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.