javascript - 我想将 LearnMoreButton 文本与 h4 文本对齐。与现有的，了解更多显示在下一行

Question

const Header: React.FC<Props> = ({ copy }: Props) => {
    if (isUndefined(copy)) return null;
    return (
        <Container>
            <img src={HeartCircle} />
            <Text>
                <h4>{copy.recommended.subheading}</h4>
                    <LearnMoreButton>
                        <RecommendedProviderLabel
                            isRecommendedProvider={true}
                            showIcon={false}
                            label={copy.ctas.learnMore}
                        />
                    </LearnMoreButton>
            </Text>
        </Container>
    );

标签： javascripthtmlcssreactjscomponents

Answer 1

您可以使用display flex

flexRow: {
    display: flex;
  }

<div className={classes.flexRow}>
          <img src={HeartCircle} />
          <Text>
                <h4>{copy.recommended.subheading}</h4>
                    <LearnMoreButton>
                        <RecommendedProviderLabel
                            isRecommendedProvider={true}
                            showIcon={false}
                            label={copy.ctas.learnMore}
                        />
                    </LearnMoreButton>
            </Text>
        </div>