Vue中行内文本右对齐及文本与图标对齐问题求助

Hey there! Let's get that left-side text lined up with your icons just like the right side does—looks like a small tweak to your Bootstrap layout classes will do the trick.

The Root Issue #

Right now, your text columns (both left and right) use default block-level positioning, which means they align to the top of their container instead of vertically centering with the icons next to them. The right side might look okay because the text-lg-right class pushes text toward the icon, but the left side is missing that vertical alignment hook.

Step-by-Step Fix #

Here's how to adjust your code:

1. Add vertical alignment to text columns
   For both your left and right text-containing columns, add the Bootstrap flex classes d-flex align-items-center. This turns the column into a flex container and centers its content vertically—matching the position of the icons in adjacent columns.

2. Preserve text alignment with w-100
   Wrap your text content in a full-width container (w-100) so your existing text alignment classes (text-center, text-sm-left, etc.) still work correctly inside the flex column.

Modified Code Snippet #

Here's what your first row's left and right text sections will look like after the changes:

<!-- Right Text Column -->
<div class="col-auto col-lg-3 order-lg-1 main-text-right d-flex align-items-center">
  <div class="text-center text-sm-left text-lg-right w-100">
    <strong>Top Text</strong>
    <p>Bottom Text</p>
  </div>
</div>

<!-- Left Text Column -->
<div class="col-auto col-lg-3 order-lg-5 main-text-left d-flex align-items-center">
  <div class="text-center text-sm-left text-lg-left w-100">
    <strong>Boreal Text</strong>
    <p>Austral Text</p>
  </div>
</div>

Repeat the same changes for the second row's text columns, and you'll see the left-side text align perfectly with the icons next to it.

Quick Check #

Make sure your .col-circle-width class doesn't have any unexpected padding or margin that might throw off the alignment. If the icons have a fixed size, the flex vertical centering should match them perfectly without extra adjustments.

内容的提问来源于stack exchange，提问作者Saucy Goat