解决方案：http://jsfiddle.net/sqp1wdap/3/
1.将眼睛和文本对齐到flex-start
1.使line-height的文本相同的眼睛高度
下面是编辑后的代码：

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: flex-start; // ← edit (1)
  background: #eee;
}
.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  align-self: flex-start; // ← edit (1)
  background: #eaa;
  line-height: $fontSize; // ← edit (2)
}

字符串
它看起来是这样的：

的数据

当然，如果图标的高度等于行的高度，它将与第一行对齐。
通常情况下，这两件事是不同的。你不能在不影响视觉设计的情况下改变行高或图标高度。
所以解决这个问题的方法是用一个高度等于文本行高度的flex容器来 Package 图标。这个容器将垂直居中图标。如果图标比容器大，那么它将从顶部和底部溢出。
所以在你的例子中（我只是为了清楚起见夸大了高度，你也可以尝试使用非常小的值，比如8px，看看它在两种情况下是如何工作的）

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  height: 100px; /* <-- set this */
}

.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  background: #eaa;
  line-height: 100px; /* <-- equal to this, no need to set this, just use right value above */
}

字符串
请注意，您实际上不需要更改文本行高，只需将眼睛容器高度设置为该值。
Fiddle适用于行高大于图标的情况：http://jsfiddle.net/ofdwemva/
Fiddle适用于行高小于icon的情况：http://jsfiddle.net/ofdwemva/1/

我找到了不改变文本line-height属性的解决方案。
1.与之前的oluckyman's answer相同，将Eye和Text对齐到flex-start。
1.在Eye上添加隐藏的伪元素，它类似于文本的高度。
1.对Eye使用center对齐，这将对齐Eye本身和我们创建的伪元素。
以下是JSFiddle的链接和我所做的总结：

.LegendItem {
  min-height: $itemHeight;
  font-size: $fontSize;
  margin: 2px 0;

  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;  // <-- Change this
}

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bbb;
}
.LegendItem_Eye::before {   // <-- Add this
  content: "A";
  width: 0px;
  visibility: hidden;
}

.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  background: #eaa;         // <-- Remove align-self
}

字符串
它看起来像this。

这里的很多答案将取决于你的情况-目前（和错误）接受的答案只会工作，如果你的设计师不介意你屠夫的线高度，这是没有好处的大多数。
如果你想这样做，你的最终目标是让图标容器与一行文本的高度相同，然后在这个容器中对齐图标。
这样做的一个体面的方法是通过复制一点文本与相同的css作为文本你想对中心然后隐藏它，这将确保容器现在是相同的高度作为文本.现在你只需中心对齐图标.
这里有一个react中的例子（css是一样的）

export function CheckmarkListItem({ point }: Iprops) {
    return (
        <Div>
            <IconContainer>
                <SvgWrap size={20} mixin={svgMix}>
                    <Checkmark />
                </SvgWrap>
                <HiddenDiv>
                    <Typo tag="p">Mock text</Typo>
                </HiddenDiv>
            </IconContainer>
            <PointDiv>
                <Typo tag="p">{point}</Typo>
            </PointDiv>
        </Div>
    );
}
const Div = styled.div`
    display: flex;
    text-align: left;
    gap: 15px;
    ${(props) => props.theme.breakpoints.up.md} {
        gap: 30px;
    }
    align-items: flex-start;
`;

const PointDiv = styled.div``;

const IconContainer = styled.div`
    display: flex;
    align-items: center;
`;
const svgMix = css`
    margin: 0;
`;

const HiddenDiv = styled.div`
    visibility: hidden;
    width: 0;
`;

字符串

.LegendItem_Eye {
  width: $slotWidth; // keep width
  float:left; // float left
  line-height:1.3; // define line height
}

字符串
这应该是你所需要的一切。Demo.

您可以使用transform属性沿着，并根据存储的图标高度和可自由选择的无单位文本行高进行计算。

.parent {
  --text-line-height: 1.5;
  --icon-height: 24px;

  display: flex;
  align-items: flex-start;
}

.icon {
  height: var(--icon-height);
  width: var(--icon-height); // Just assuming it's a square icon
}

.text {
  line-height: var(--text-line-height);
  transform: translateY(calc(var(--icon-height) / 2 - 0.5em * var(--text-line-height)))
}

字符串
translateY()中的计算通过从图标高度减去文本实际高度（当前font-size与em单位和line-height的组合）并将其除以2来确保正确对齐。
使用这种方法，您还可以更改--text-line-height属性或调整文本font-size，而不会影响垂直对齐。
请记住，这会将文本元素稍微移动到其父元素之外。

我不知道是否有一个优雅的方式来做它与flex，但我可以为您提供一个裂缝相同，这将不会影响任何其他元素，据我猜测：
你可以为font-awesome.css添加自定义样式

.fa{
    position: absolute;
    top: 0;
    left: 0;
    text-align:center;
    padding:3px;
}

字符串
对于您的自定义样式，您可以这样做：

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  position: relative; /* Added this new rule */
}

型
我知道这不是正确的解决方案，但你可以给予这个尝试，除非它损害其他元素。：）

jSFiddle