文本与图片无法对齐：文本偏低且移动文本图片同步跟随问题排查

尝试将文本与图片对齐，但文本始终低于图片；已尝试将margin设为0等操作，移动文本时图片会同步跟随，未发现相关代码问题，请问该如何解决？

现有代码 #

HTML #

<!--HTML-->
<div id="description">
    <img class="recipe-img" src="Images/cookie.jpeg" alt="">
    <p class="description">Mmm.. Cookies, who doesn't like these fun filled treats? Today i will show you my grandmothers recipe for the best cookies on planet earth
</div>

CSS #

.description {
    display:inline-block;
    width:300px;
    height:150px;
    border:2px;
    border-color:black;
    border-style:solid;
    border-radius:5px;
    padding:5px;
    margin-top:50px;
}

.recipe-img {
    border-radius:15px;
    display:inline-block;
    object-fit:cover;
    width:300px;
    height:150px;
    overflow:hidden;

    border:2px;
    border-style:solid;
    border-color:black;
}

解决方案 #

方案1：使用Flex布局（推荐） #

Flex布局是现代前端解决对齐问题最简便的方式，直接给父容器设置弹性布局并指定垂直对齐方式：

修改后的CSS：

/* 给父容器添加flex布局 */
#description {
  display: flex;
  align-items: center; /* 垂直居中对齐子元素 */
  gap: 10px; /* 可选，给图片和文本之间添加间距 */
}

.description {
    display:inline-block;
    width:300px;
    height:150px;
    border:2px solid black; /* 简化边框写法 */
    border-radius:5px;
    padding:5px;
    margin-top:0; /* 移除导致文本下移的margin-top */
}

.recipe-img {
    border-radius:15px;
    display:inline-block;
    object-fit:cover;
    width:300px;
    height:150px;
    overflow:hidden;
    border:2px solid black; /* 简化边框写法 */
}

方案2：调整inline-block的垂直对齐 #

如果要保留inline-block布局，需要给两个子元素设置垂直对齐方式，并移除文本的上外边距：

修改后的CSS：

.description {
    display:inline-block;
    width:300px;
    height:150px;
    border:2px solid black;
    border-radius:5px;
    padding:5px;
    margin-top:0; /* 移除之前的50px上外边距 */
    vertical-align: middle; /* 设置垂直居中对齐 */
}

.recipe-img {
    border-radius:15px;
    display:inline-block;
    object-fit:cover;
    width:300px;
    height:150px;
    overflow:hidden;
    border:2px solid black;
    vertical-align: middle; /* 设置垂直居中对齐 */
}

问题原因 #

• inline-block元素默认采用基线对齐，文本的基线和图片的基线会对齐，导致视觉上文本偏低；
• 你给文本p标签设置了margin-top:50px，会强行将文本向下推，而因为inline-block的布局特性，图片会跟着基线同步移动，所以出现“移动文本图片也跟着动”的情况。

内容的提问来源于stack exchange，提问作者user19945837