該網頁是使用引導程式設計的。我可以知道如何將內容分配給中心嗎？我嘗試將 mx-auto 更改為 mt-5，它適用于某些圖片但不適用于所有圖片。
下面是編碼
<div class="mx-auto container d-flex" style="min-height: 500px;">
<div class="d-flex justify-content-center" style="flex: 1;">
<img style="max-width: 80%;" src="{{ asset('upload/artworks/' . $artwork->image_url) }}"
/>
</div>
<div style="flex: 1;">
<div class="h-75">
<div class="mb-5">
<h2 class="display-5 mb-4">
{{ $artwork->name }}
</h2>
<p class="text-muted">
{{ $artwork->description }}
</p>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
如果我理解正確，您正在尋找影像和內容列以使其內容垂直居中。
引導類align-items-center是您需要的。請參閱下面使用您的原始標記的示例。
img-fluid編輯：更新以支持使用和gap-5類的更大影像
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mx-auto container d-flex align-items-center gap-5" style="min-height: 500px;">
<div class="d-flex justify-content-center" style="flex: 1;">
<img src="https://source.unsplash.com/1000x1000" class="img-fluid"
/>
</div>
<div style="flex: 1;">
<div class="h-75">
<div class="mb-5">
<h2 class="display-5 mb-4">
{{ $artwork->name }}
</h2>
<p class="text-muted">
{{ $artwork->description }}
</p>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
根據您的問題，您可能可以嘗試 justify-content-between。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/452640.html
下一篇：如何用字串c#求平均值