已解决 - 为什么这张引导卡未对齐？

Question

此引导卡的图像和文本应该并排放置，组合标题 + 文本相对于图像集中。 但它们有点高于图像。

它的外观图片：

HTML：

<div class="card bg-transparent border-0 text-white mb-3" >
        <div class="row g-0">
          <div class="col-md-6">
            <img src="../assets/images/cp/sobre-cid-1.jpg" class="img-fluid rounded-start img-esq" alt="cid-1">
          </div>
         <div class="col-md-6">
            <div class="card-body">
                <h3 class="card-title">TITLE</h3>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
         </div>
        </div>
    </div>

CSS：

.img-fluid.rounded-start {
    height: calc(120px + 10vw);
    width: 90vw;    
    object-fit: cover;
}

.img-esq {
    border-radius: 0px 30px 30px 0px;
}

.img-dir {
    border-radius: 30px 0px 0px 30px;
}

.card-title {
    font-family: 'Martel';
    font-size: 22px;
    padding: 20px;
    text-align: left;
    font-weight: 600;
}

.card-title-right {
    font-family: 'Martel';
    font-size: 22px;
    padding: 20px;
    text-align: right;
    font-weight: 600;
}

.card-text {
    font-family: 'Martel';
    font-size: 14px;
    padding-left: 20px;
    padding-right: 30px;
    text-align: left;
}

.card-text-right {
    font-family: 'Martel';
    font-size: 14px;
    padding-left: 30px;
    padding-right: 20px;
    text-align: right;
}

附加信息：卡片位于获取整个页面的 div 中，这是 CSS：

.bg {
    background-image: url(../images/cp/fundo.png);
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;
    margin-top: 0px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

我主要寻找边距和填充。 我尝试将 padding-top 和 margin-top 更改为零，我什至在引导卡上方的项目中寻找它，但没有任何帮助，卡上方的项目和卡本身之间只有一个 br 标签。 我还查看了卡中的边距，一切似乎都正确。

编辑 1：

我在 to.row 中添加了一个 display: flex 和 align-items:center，它不是完全居中但也许我可以使用它，但每张卡片之间仍然有很大的空间：

编辑 2：

我向.row添加了一个margin-top: -80px ，现在卡片之间的空间很好。 我认为这不是完美的解决方案，但目前有效。

为了使文本相对于图像垂直居中，我添加了margin-top: 60px到卡片的标题，并将它们向下推。 同样，不完美但现在可以使用。

编辑 3：

我修好了它。 问题出在我不知道影响整个页面的 CSS 代码的一部分。 是这样的：

img {
    width: 70%;
    height: auto;
    margin-top: 15%;
}

我认为它只会影响它上面的 class。 事实证明，它影响了所有 img 标签。

我通过删除Codepen中的CSS代码的一部分找到了。

Answer 1

问题可能是由 img-fluid.rounded-start class 的高度属性中的 calc() function 引起的。此 function 根据视口的大小计算图像的高度，这可能导致图像大于或小于预期。 尝试为其设置固定值。

此外，您可以尝试使用 align-items: center in the.bg class，这应该将元素对齐到 div 的中心。