Скачать или смотреть Achieve Perfect Alignment in CSS: Center Text and Left Align an Icon with Ease

Learn how to position two items in CSS, with an icon left-aligned and text centered. Follow our clear guide for effortless styling!
---
This video is based on the question https://stackoverflow.com/q/63931265/ asked by the user 'Sarah Ganci' ( https://stackoverflow.com/u/10391851/ ) and on the answer https://stackoverflow.com/a/63931314/ provided by the user 'ksav' ( https://stackoverflow.com/u/5385381/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to position 2 items such that one is center and one is to the left?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Position 2 Items Such That One is Center and One is to the Left

When designing a user interface, particularly in chat applications or call-to-action (CTA) sections, achieving the desired layout can sometimes be a challenge. A common requirement is to have an icon aligned to the left, while accompanying text is centered in the same line. If you've found yourself struggling to get this alignment just right, you're not alone!

In this post, we'll explore a simple yet effective solution using CSS flexbox. We'll break down the pieces of code needed to achieve the layout you desire.

The Problem

You want to position two elements in a single container:

An icon (represented by @ )

Text that is centered within the remaining space

Here's how the output should ideally look:

[[See Video to Reveal this Text or Code Snippet]]

However, you might end up with something like this instead:

[[See Video to Reveal this Text or Code Snippet]]

The Solution

To reach the layout you want, we need to adjust the CSS properties we apply to both the icon and the text. Below are the steps to achieve this alignment using a flexbox container.

CSS Styles

Here’s a concise breakdown of the CSS styles you'll need:

[[See Video to Reveal this Text or Code Snippet]]

HTML Structure

Your HTML will also need to match this structure:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of Flexbox Properties

display: flex;: This activates the flexbox model for arranging child elements within the container.

align-items: center;: This centers the items vertically within their respective flex container, giving a balanced look.

justify-content: space-between;: This allocates space between the items in the container, pushing the icon to the left and centering the text independently.

flex: 0 0 auto; for .icon: This rule prevents the icon from stretching, ensuring it remains aligned to the left.

flex: 1 1 auto; for .text: This allows the text to expand and fill the available space, and the text-align: center; centers it nicely within its designated space.

Conclusion

Achieving the perfect layout often comes down to understanding and utilizing CSS properties effectively. By using flexbox, you can easily align items as needed without complex positioning rules.

Now, you should be able to implement an icon left-aligned with centered text in your projects effortlessly! Don't forget to experiment with the properties to see how they affect your layout. Happy coding!