Вертикальное выравнивание — Tailwind CSS
Домашняя страница Tailwind CSS Версия Tailwind CSS v2.0.3v1.9.6v0.7.4Tailwind CSS на GitHubУтилиты для управления вертикальным выравниванием встроенного поля или поля ячейки таблицы.
Ссылка на класс по умолчанию
Базовая линия
Используйте align-baseline для выравнивания базовой линии элемента с базовой линией его родителя.
Быстрая коричневая лиса перепрыгнула через ленивую собаку.
... Первые
Используйте align-top , чтобы выровнять верхнюю часть элемента и его потомков по верхней части всей строки.
Быстрая коричневая лиса перепрыгнула через ленивую собаку.
... Середина
Используйте align-middle для выравнивания середины элемента с базовой линией плюс половина x-высоты родителя.
Быстрая коричневая лиса перепрыгнула через ленивую собаку.
.
.. 
.. Использовать align-bottom для выравнивания нижнего края элемента и его потомков по нижнему краю всей строки.
Быстрая коричневая лиса перепрыгнула через ленивую собаку.
... Text Top
Используйте align-text-top , чтобы выровнять верх элемента с верхом шрифта родительского элемента.
Быстрая коричневая лиса перепрыгнула через ленивую собаку.
... Текст внизу
Использовать align-text-bottom для выравнивания нижнего края элемента по нижнему краю шрифта родительского элемента.
Быстрая коричневая лиса перепрыгнула через ленивую собаку.
... Responsive
Чтобы контролировать вертикальное выравнивание только в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите вертикального выравнивания. Например, добавление класса md:align-top к элементу приведет к применению утилиты align-top на экранах среднего размера и выше.
<дел> ... Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Дополнительные сведения о функциях адаптивного дизайна Tailwind см. в документации по адаптивному дизайну.
Настройка
Варианты
По умолчанию для утилит вертикального выравнивания создаются только адаптивные варианты.
Вы можете контролировать, какие варианты генерируются для утилит вертикального выравнивания, изменяя verticalAlign в разделе вариантов файла tailwind.config.js
Например, эта конфигурация также будет генерировать варианты наведения и фокуса:
// tailwind.config.js
модуль.экспорт = {
варианты: {
продлевать: {
// ...
+ вертикальное выравнивание: ['наведение', 'фокус'],
}
}
} Отключение
Если вы не планируете использовать утилиты вертикального выравнивания в своем проекте, вы можете полностью отключить их, установив параметр verticalAlign свойства по false в разделе corePlugins вашего файла конфигурации:
// tailwind.
config.js
модуль.экспорт = {
основные Плагины: {
// ...
+ вертикальное выравнивание: ложь,
}
} ← Текст перепродажил.0116
вертикальное выравнивание · html
Работает на GitBook
Свойство CSS vertical-align задает вертикальное выравнивание встроенного поля или поля ячейки таблицы.
/* Значения ключевых слов */ вертикальное выравнивание: базовая линия; вертикальное выравнивание: суб; вертикальное выравнивание: супер; вертикальное выравнивание: текст сверху; вертикальное выравнивание: текст внизу; вертикальное выравнивание: посередине; вертикальное выравнивание: сверху; вертикальное выравнивание: снизу; /* значения <длины> */ вертикальное выравнивание: 10em; вертикальное выравнивание: 4px; /* <процент> значения */ вертикальное выравнивание: 20%; /* Глобальные значения */ вертикальное выравнивание: наследовать; вертикальное выравнивание: начальное; вертикальное выравнивание: не установлено;
Свойство вертикального выравнивания можно использовать в двух контекстах:
- Для вертикального выравнивания блока встроенного элемента внутри содержащего его блока строки.
对应的code，如果有一天，你忘记了的话，来copy这段代码
<стиль>
* {
заполнение: 0;
маржа: 0;
}
п {
размер шрифта: 24px;
высота строки: 160 пикселей;
высота: 160 пикселей;
оформление текста: подчеркивание над чертой;
граница: 1px сплошной красный;
}
стол{
граница: 1px сплошной черный;
}
тд {
text-decoration: надчеркивание, подчеркивание;
}
<тело>
сверху:
посередине:
внизу:
супер:
под: mozillademos.org/files/15189/star.png"/>
текст сверху:
текст внизу:
1 пиксель:
- Чтобы выровнять содержимое ячейки в таблице по вертикали:
对应的代码如下
<стиль> стол, т, тд {
граница: 1px сплошная #000;
}
й, тд {
}
стол {
граница: 1px сплошной красный;
} <тело> <таблица> <тело>базовый уровень сверху средний внизу <тд>Существует теория, согласно которой, если кто-либо точно узнает, для чего нужна Вселенная и почему она здесь, она мгновенно исчезнет и будет заменена чем-то еще более причудливым и необъяснимым.
Есть еще одна теория, согласно которой это уже произошло.
