Могу ли я центрировать элемент по отношению к другому элементу в HTML?
Я участвую в проекте и создаю нижний колонтитул для целевой страницы. Красная рамка — это размер контейнера, с которым у меня возникли проблемы.
Я не хочу центрировать весь элемент div, потому что мне нравится текущее положение вещей, но меня очень беспокоит тот факт, что логотип не совпадает с текстом. Есть ли способ выровнять центр изображения по центру текста, сохранив при этом все остальное как есть?
Вот код этого div:
<div className = "lg:col-span-2">
<div>
{" "}
<Link
href = "/"
className = "flex items-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100"
>
<Image
src = "/img/logo.png"
alt = "N"
width = "128"
height = "128"
className = "w-22"
/>
</Link>
</div>
<div className = "max-w-md mt-4 text-gray-500 dark:text-gray-400">
Instituto Lanterna Luminosa
</div>
</div>
Ответы 2
Вам следует рассмотреть возможность упрощения элементов и оптимизации использования классов Tailwind. В одном и том же div вы можете поставить link с image внутри и paragraph:
<div class = "grid">
<div class = "col-span-2 flex items-center flex-col">
<a href = "#" class = "block">
<img src = "https://via.placeholder.com/300" />
</a>
<p class = "text-center">Lorem ipsum dolor sit amet</p>
</div>
<!-- Your others cols -->
</div>Не забудьте адаптировать этот пример к вашему компоненту React (я предполагаю, что вы используете Next JS), вы можете проверить эту ручку
На всякий случай, если у кого-то еще возникнет такая проблема, я очень надеялся, что существует простое свойство CSS или Tailwind, позволяющее легко исправить ошибку, но в итоге мне пришлось создать еще один контейнер внутри исходного контейнера и центрировать элементы внутри него, что сделало код немного более подробный, но проблема решена.
Вот исправление:
<div className = "lg:col-span-2 flex items-start">
<div className = "inline-block flex flex-col items-center">
<div>
{" "}
<Link
href = "/"
className = "flex items-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100"
>
<Image
src = "/img/logo.png"
alt = "N"
width = "128"
height = "128"
className = "w-22"
/>
</Link>
</div>
<div className = "max-w-md mt-4 text-gray-500 dark:text-gray-400">
Instituto Lanterna Luminosa
</div>
</div>
</div>
Вот результат, работающий как положено:
Спасибо за ваш ответ, но вы центрируете элементы внутри div, но, как я уже сказал, это не ожидаемое выравнивание. Мне нужен был способ сохранять текст >точно< там, где он был, выравнивая изображение по тексту только по горизонтали, не оставляя при этом начало изгиба. Я также ценю ваше предложение упростить элементы, но я работаю над этим проектом с десятками других разработчиков, поэтому я не могу слишком сильно менять код на полпути.