使用 flex 對齊圖像文本和子文本

Question

我正在嘗試對齊 div 中的圖像文本和子文本。 我能夠實現，但我不知道如何將圖像精確到標題，現在圖像是從潛文本開始的，當文本內容更多時圖像高度會增加。

我想要實現的是左側圖像垂直開始與標題對齊並在該文本下方，並且圖像不應在高度上拉伸。

 .card-wrapper { flex-direction: row; box-sizing: border-box; align-items: center; justify-content: center; display: flex; }.img-wrapper { box-sizing: border-box; width: 100%; padding-right: 24px; }.img-wrapper>img { width: 100%; height: 80px; }.text { box-sizing: border-box; flex: 1 1 auto; }.text>p { margin: 0; }

 <div className="card-container"> <div class="card-wrapper"> <div class="img-wrapper"> <img src="https://i.picsum.photos/id/460/200/300.jpg?hmac=ZPCe3djambX5E8sSU4PD0iOiqnK-oWfilPTycsWWvCM" /> </div> <div class="text"> <strong class="text-title">Title</strong> <p class="text-description"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </div> </div> </div>

Answer 1

如果我猜對了，那么您可能正在尋找類似的東西。

而不是使用 align-items: center 將所有項目居中（垂直）對齊，您可以使用 flex-start 基本上意味着它將圖像棒移動到 div 的頂部。

 .card-wrapper { flex-direction: row; box-sizing: border-box; align-items: flex-start; justify-content: center; display: flex; }.img-wrapper { box-sizing: border-box; width: 100%; padding-right: 24px; }.img-wrapper>img { width: 100%; height: 80px; }.text { box-sizing: border-box; flex: 1 1 auto; }.text>p { margin: 0; }

 <div className="card-container"> <div class="card-wrapper"> <div class="img-wrapper"> <img src="https://i.picsum.photos/id/460/200/300.jpg?hmac=ZPCe3djambX5E8sSU4PD0iOiqnK-oWfilPTycsWWvCM" /> </div> <div class="text"> <strong class="text-title">Title</strong> <p class="text-description"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> </div> </div> </div>

Answer 2

到 position 頂部的圖像，將align-items從center更改為flex-start （或完全刪除它，因為它是默認設置）。

.card-wrapper {
  align-items: flex-start;
}

為了保留圖像縱橫比，添加align-self ：

img {
  align-self: center;
}

請參閱文檔： align-self和align-items 。