Блог

Главная - Вопросы по программированию - Центрировать текст по вертикали в сетке с помощью tailwindcss

Центрировать текст по вертикали в сетке с помощью tailwindcss

#html #css #responsive-design #tailwind-css

#HTML #css #адаптивный дизайн #tailwind-css

Вопрос:

Я пытался создать адаптивный макет сетки с помощью tailwindcss, но я не мог центрировать тексты по вертикали в сетке. Все, что я мог сделать, это центрировать текст по горизонтали с помощью text-center .

 <body>
  <div class="grid gap-5 grid-flow-row grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 text-center ">
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
    ...
    <div class="border-2 rounded-lg h-20 lg:h-32">Text</div>
</body>

Демонстрация в codepen

Ответ №1:

Вы можете сделать это с помощью flex. Просто добавьте это flex justify-center items-center в каждый текстовый раздел, вот так:

 <div class="border-2 rounded-lg h-20 lg:h-32 flex justify-center items-center">Text</div>

Это сделает его гибким контейнером с дочерними элементами, центрированными как по горизонтали, так и по вертикали.

И вы также можете удалить text-center из оболочки, так как это будет избыточно.

Комментарии:

1. Спасибо за ответ. Теперь я вижу это, и это заставило меня задуматься, почему я об этом не подумал. Думаю, мне все еще нужно многому научиться, так как я недавно начал изучать веб-разработку.

Ответ №2:

Вы можете использовать justify-self-center для горизонтального центрирования текста внутри столбца сетки. и self-center для вертикального центрирования текста / содержимого внутри столбца сетки. Для большей наглядности content-center расположите столбец сетки по центру по вертикали, он же дочерний div внутри родительского контейнера сетки. justify-center для горизонтального. Вопрос, который вы должны задать, заключается в том, хочу ли я изменить положение столбца сетки? или положение содержимого столбца сетки?