某些反应卡上的文本位置错误答案

【问题标题】：Text mispositioned on some react cards某些反应卡上的文本位置错误
【发布时间】：2019-05-27 18:12:52
【问题描述】：

我有一个获取视频的应用程序，它为它获取的每个视频创建一张卡片，卡片上还有视频标题、视频创建者、视频链接、视频下载链接、观看次数和上传日期。

我正在毫无问题地获取所有这些东西，并且它们大部分都以我想要的方式显示。

奇怪的是，对于一些卡片来说，下载和观看视频的文字位置不对，而且比预期的要高。

在这里您可以看到我遇到的问题，基本上第一张和第三张卡片显示正确，但您可以看到中间卡片的下载和查看文本由于某种原因较高。

以下是我的卡片CSS

.card {
    background-color: $secondaryColor;
    border: 3px solid #fff;
    outline: black solid thin;
}

.authorInfo {
    display: flex;
}

.card-body {
    display: flex;
    justify-content: space-between;
    margin-bottom: -10px;
}

.card-footer {
    display: flex;
    justify-content: space-between;
}

.watchComp {
    display: flex;
}

.dlComp {
    display: flex;
}

.card-deck {
    padding-bottom: 1.5rem;
}

dl comp 由图标和链接组成，与 watch comp 相同。发生这种情况时，我尝试更改检查元素中的定位样式，但没有任何效果。

关于可能导致此问题的任何想法？我使用的卡片来自 react-bootstrap，如果这很重要的话。

【问题讨论】：

看起来它与标题为 1 个文本行而不是 2 个文本行有关。“观看剪辑”和“下载剪辑”的图标看起来基于白色 div 的底部。尝试将图标和文本包装在 div 中。并将这个 div 放置在你想要的位置（可能与图标的位置相同）。
最终，除非您分享 Minimal, Reproducible Example，否则我们无能为力。

标签： html css twitter-bootstrap

【解决方案1】：

第二个屏幕截图中的Watch Clip 和Download Clip 捕捉到顶部，因为标题只有一行toxic。您可以将该行包装在 <div> 标记中或使用 align-items: center 样式。

【讨论】：