How to assign the content to center?-CodePudding

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  style="min-height: 500px;">
<div  style="flex: 1;">
    <img style="max-width: 80%;" src="{{ asset('upload/artworks/' . $artwork->image_url) }}" 
/>
</div>
<div style="flex: 1;">
    <div >
        <div >
            <h2 >
                {{ $artwork->name }}
            </h2>
            <p >
                {{ $artwork->description }}
            </p>
        </div>
   </div>
</div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div  style="min-height: 500px;">
<div  style="flex: 1;">
    <img src="https://source.unsplash.com/1000x1000" 
/>
</div>
<div style="flex: 1;">
    <div >
        <div >
            <h2 >
                {{ $artwork->name }}
            </h2>
            <p >
                {{ $artwork->description }}
            </p>
        </div>
   </div>
</div>
</div>

CodePudding user response：

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