How to assign the content to center? - html

Question

The webpage is designed using the bootstrap. May I know how to assign the content to the center? I have tried to change mx-auto to mt-5, it work for some pictures but not for all.
Below is the coding
<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

If I understand correctly you are looking for both the image and content columns to vertically center their content.
The bootstrap class align-items-center is what you need here. See example below using your original markup.
EDIT:
Updated to support larger images using img-fluid and 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

Based on your question, probably you can try justify-content-between.