我正在嘗試將文本與我的影像對齊，但它最終低于影像，我嘗試將邊距設定為零等，如果我向上或向下移動文本影像將跟隨，我不相信我有任何導致這種情況的代碼，是什么問題？
<!--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;
}
uj5u.com熱心網友回復：
為您的 div 使用 Flex#description只需在您的 CSS 中添加此代碼
#description {
display: flex;
align-items: center;
justify-content: space-between;
}
因為這個 flex 將所有內容對齊到 div 的垂直中心并保持元素之間的空間。
margin-top: 50px并從您的段落中洗掉該屬性，
uj5u.com熱心網友回復：
#description{
display: flex;
align-items: center;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/506978.html