双区域卡片中文本无法垂直对齐并设置内边距的问题求助

我做了一个分两个区域的卡片：图片占卡片80%的空间，文本占剩下20%。我想让文本区域里的文字垂直对齐，同时给文本加内边距，但试了vertical-align: baseline;、align-items:flex-start;、display: flex; justify-content: flex-start; align-items: center;这些样式都没达到预期效果。

当前代码如下：

HTML #

<div class="card">
              <img
                src=".#.jpg"
                alt="#"
              />
              <div class="card-h3">
                <h3>Parc national des Calangues</h3>
              </div>
</div>

CSS #

.card img {
    width: 100%;
    height: 80%;
    object-fit: cover;
}

.card-h3{
    display: flex;
    vertical-align: baseline;
}

问题出在卡片整体布局没搭对，文本区域的高度和对齐配置也不到位，按下面的代码修改就能实现效果：

.card {
    display: flex;
    flex-direction: column;
    height: 400px; /* 卡片高度可根据需求自定义 */
}

.card img {
    width: 100%;
    flex: 8;
    object-fit: cover;
}

.card-h3 {
    flex: 2;
    display: flex;
    align-items: center; /* 实现文字垂直居中 */
    padding: 0 1rem; /* 左右内边距，按需调整 */
}

.card-h3 h3 {
    margin: 0; /* 清除h3默认的上下边距，避免影响布局 */
}

说明 #

1. 给.card设置垂直方向的flex布局，让图片和文本区域按比例分配空间；
2. 用flex:8和flex:2代替固定百分比高度，更精准地分配80%和20%的占比；
3. 通过align-items:center让文本在自己的区域内垂直居中，加上padding实现内边距效果；
4. 清除h3的默认边距，避免多余的间距影响布局。

内容的提问来源于stack exchange，提问作者Noc er Gal