Div center align style: CSS Layout — Horizontal & Vertical Align — Вебджем.рф

Содержание

Tailwind Center Element Element Vertically & Horizontally

+ 10 Dev выравнивание.
25 июня 2021 г. · 2 минуты чтения
В настоящее время я выбираю Tailwind CSS в качестве своего переходного CSS-фреймворка. И сегодня я покажу вам, как центрировать элемента с Tailwind CSS быстро.
Мы рассмотрим два метода центрирования div с помощью Tailwind. Между этими двумя методами нет однозначно неправильного или правильного выбора. Как правило, CSS Grid следует использовать для макета высокого уровня, а CSS flexbox — для деталей. Для нашей демонстрации мы будем использовать одну и ту же структуру CSS, чтобы вы могли лучше увидеть разницу в обоих примерах.
1. Центральный элемент div с центром сетки
Мы начнем с использования центра сетки , чтобы сделать элемент div центрированным по горизонтали и вертикали на странице.
```
 Центрирование с использованием сетки попутного ветра
  
```
Можете ли вы поверить, что этот код — все, что нам нужно? Давайте исследуем, что происходит.
- grid : Дает элементу отображение: свойство grid css -height) как высота
Этот код идеально центрирует элемент по горизонтали и вертикали на странице.
См. содержимое центра Pen Grid с помощью Tailwind CSS от Chris Bongers (@rebelchris) на КодПене.
Ищете версию CSS Grid по центру?
2. Центральный элемент Tailwind с центром гибкости
Второй вариант центрирования в Tailwind — использование flexbox для HTML-элемента. Подход очень похож, но мы должны указать горизонтальное и вертикальное выравнивание с помощью flexbox.
Давайте посмотрим, как это будет выглядеть:
```
 
  Центрирование с использованием Tailwind Flex
  
```
Как видите, выравнивание div похоже на первый пример, но с дополнительной переменной.
- flex : Добавляет display: flex свойство CSS
- justify-center : Центрирует div по горизонтали
- items-center : Центрирует содержимое по вертикали 100vh (высота экрана) в качестве высоты
Окончательный код CSS будет выглядеть следующим образом:
См. центральный элемент Pen Flex с использованием Tailwind CSS Криса Бонгерса (@rebelchris) на КодПене.
Ищете статью центра CSS Flex?
Спасибо, что прочитали, и давайте подключаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Facebook или Twitter
🛠 Редактировать на GitHub
Поделитесь знаниями с другими разработчиками в Twitter
Твитните этот совет
- + 10 Devs Like It
Powered By Webmentions — Узнайте больше
Читать Next 📖
Создание анимационной волновой линии с Thinwind CSS
Как к центру Windes 10 TaskBar .
.. IC … IC …
Включите JavaScript
Как центрировать значки панели задач Windows 10 Как в Windows 11 | 2022 | панель задач для ноутбука и ПК
10 марта 2022 г. · 4 мин чтения
Tailwind CSS Числовые варианты шрифта
9 марта 2022 г. · 3 мин. Читайте
Присоединение 2008 Devs и подпишитесь на мою новостную рассылку
- 1000 Статьи, написанные
- 2008 Devs, подписанные
- 529116 Слова.
  
  Я пытаюсь отцентровать содержимое на этой странице:
  https://talulamerriwether.com/pages/about
  
  Я хочу, чтобы текст был выровнен по левому краю и просто центрировался по всему содержимому . Все, что я пробовал, делает наоборот, оставляя содержимое полностью слева, но центрируя текст внутри него.
  
  Может ли кто-нибудь помочь мне понять, как это сделать? Прошу прощения, если решение очевидно, у меня пока нет большого опыта.
  
  Вот код, который у меня есть в разделе «пользовательская жидкость» на этой странице:
```
 <стиль> * {
 box-sizing: граница-коробка;
}
.контейнер {
 положение: родственник;
 ширина: 100%;
 максимальная ширина: 400 пикселей;
}
.изображение {
 дисплей: блок;
 ширина: 100%;
 высота: авто;
 радиус границы: 50%;
}
.оверлей {
 положение: абсолютное;
 сверху: 0;
 внизу: 0;
 слева: 0;
 справа: 0;
 высота: 100%;
 ширина: 100%;
 непрозрачность: 0;
 переход: .9легкость;
}
.container: наведение .overlay {
 непрозрачность: 1;
}
.изображение2 {
высота: 100%;
 выравнивание текста: по центру;
 радиус границы: 50%;
}
.fa-пользователь: наведите {
 цвет: #еее;
}
/* Создаем три неравных столбца, которые плавают рядом друг с другом */
.столбец {
 плыть налево;
 отступ: 30 пикселей;
 максимальная ширина: 270 пикселей;
}
.левый{
 ширина: 60%;
 максимальная ширина: 500 пикселей;
 заполнение справа: 12%;
заполнение сверху: 30px;
высота строки: 1,2;
}
.  верно{
 ширина: 40%;
 максимальная ширина: 290 пикселей;
 }
/* Очистить плавающие элементы после столбцов */
.строка: после {
 содержание: "";
 дисплей: таблица;
 ясно: оба;
}   <тело> <дел> <дел">  Талула Мерриуэзер Мейс – междисциплинарный художник из Стонтона, штат Вирджиния.

 контакт: [email protected]
  
        



Резюме В тени, сквозь солнце
Персональная выставка
Beverly Street Studio School Gallery, Стонтон, Вирджиния
февраль 2021 г.

 
 Кинофестиваль Poe
Официальный отбор, "Фототаксис"
Ричмонд, Вирджиния
октябрь 2019 г. 


 Снова искать лоскутный домик
Персональная выставка
 Победитель конкурса Capstone Festival Top Honors
Hunt Gallery — Университет Мэри Болдуин, Стонтон, Вирджиния
май 2019 г.


 Кинофестиваль Poe
Официальный отбор, "Curse Worms"
Ричмонд, Вирджиния
октябрь 2018 г.


 Подумайте о том, что перекликается   
Персональная выставка
Riverviews Art Space, Линчбург, Вирджиния
ноябрь 2018 г.


 Asomatous
Персональная выставка
The Atrium Gallery - The Legacy at North Augusta, Staunton, VA
сентябрь 2018 г.


 Выставка студенческого искусства жюри MBU
Победитель, первое и третье места
Hunt Gallery – Университет Мэри Болдуин, Стонтон, Вирджиния
март 2018 г.


 Выставка студентов/преподавателей МБУ
Групповая выставка
Галерея Атриум - Наследие в Северной Огасте, Стонтон, Вирджиния
февраль 2018 г.


 На поверхности
Персональная выставка
 Покупка "Conounded"
Студенческого центра успеха Университета Мэри Болдуин, Стонтон, Вирджиния
январь 2018 г.
```