如何将内容分配到中心？

Question

网页是使用bootstrap设计的。我可以知道如何将内容分配给中心吗？我试过把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>

Answer 1

如果我没理解错的话，您正在寻找图片和内容栏以使其内容垂直居中。

bootstrap class align-items-center 就是你需要的。请参阅下面使用您的原始标记的示例。

编辑：已更新以使用 img-fluid 和 gap-5 classes

支持更大的图像

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>

Answer 2

根据你的问题，或许你可以试试justify-content-between。

如何将内容分配到中心？

How to assign the content to center?

html

css

twitter-bootstrap