html - 一些 react 卡上的文字错位

Question

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

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

奇怪的是有些卡片，下载和观看视频的文字位置错位，高于预期。

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

以下是卡片的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。

Answer 1

Watch Clip和 Download Clip在第二个屏幕截图中，因为标题只有一行 toxic，所以快照顶部.您可以将该行包装在 <div> 中标记或使用 align-items: center风格。