Align Title and Icon Properly in Elementor Tabs with CSS

Learn how to align title and icon in Elementor Tabs using CSS. Web Squadron provides a simple solution to a common problem, helping you create neat and consistent tabs.

Identifying the Problem with Aligning Title and Icon

What’s the Issue?

When working with Elementor’s Tabs, you might notice that the icons don’t align properly if the titles have different lengths. Here’s what happens:

• Short Title
  The icon stays in place.
• Long Title
  The icon shifts to the right.

This inconsistency can disrupt your design. Let’s explore how to align title and icon.

Creating Vertical Tabs with Icons

1. Create a tab with the Elementor widget.
2. Change the Direction to the left for a vertical layout.
3. Add icons to each tab, as desired.

Now, you’ll notice the problem: the icons don’t align properly with different title lengths. It’s time to align the title and icon.

Align Title and Icon Properly in Elementor with CSS

We’ll use a simple CSS code snippet to align the title and icon, ensuring a consistent look.

1. Go to the Advanced Tab
   Select your Elementor tab and go to the advanced section.
2. Use the CSS Code
   Navigate to the custom CSS settings and add the following code:

   .e-n-tab-title.e-normal {
     display: flex;
     justify-content: space-between;
   }
   

3. See the Result
   The titles align to the left, and the icons align to the right, creating a uniform appearance.

Conclusion

We hope this tutorial helps you align the title and icon in your Elementor Tabs. Feel free to experiment and make it your own.