Как назначить контент центру?
Веб-страница разработана с использованием 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>
Изображение @HugoBp и контент справа, как видите, очень близко к заголовку.
Ответы 2
Если я правильно понимаю, вы ищете столбцы изображения и контента, чтобы вертикально центрировать их содержимое.
Класс начальной загрузки 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>да, я ищу столбцы изображения и контента, чтобы вертикально центрировать страницу. Я пытался использовать ваш метод, однако дизайн столбца содержимого портится при вставке изображения большего размера.
@fallenhamster Я обновил свой фрагмент, чтобы он поддерживал изображение гораздо большего размера. Если это не решит вашу проблему, предоставьте дополнительную информацию
Основываясь на вашем вопросе, возможно, вы можете попробовать оправдать содержимое между ними.
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать добавьте дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Это
<img/>вы пытаетесь центрировать?