优化图标与标签的对齐

How to align an icon to a label in a UI design or frontend development context, here are common methods: ### Using Flexbox (Recommended) ```css .container { display: flex; align-items: center; /* Vertically aligns items in the center */ gap: 8px; /* Adds space between icon and label */ } ``` ```html <div class="container"> <icon></icon> <label>Label Text</label> </div> ``` ### Using Inline-Block ```css .icon { display: inline-block; vertical-align: middle; /* Aligns icon to the middle of text line */ margin-right: 8px; } .label { display: inline-block; vertical-align: middle; } ``` ```html <span class="icon">🖼️</span> <span class="label">Label Text</span> ``` ### Using Inline-Flex ```css .container { display: inline-flex; align-items: center; gap: 8px; } ``` ### Key Notes: - Adjust `gap`, `margin`, or `padding` values for spacing control - For more precise control (e.g., aligning to text baseline), consider `line-height` adjustments - In frameworks like Bootstrap or Tailwind CSS, utility classes (e.g., `d-flex align-items-center`) are commonly used Would you like specific examples for a particular framework or use case?