Как выровнять текст в таблице css
Перейти к содержимому

Как выровнять текст в таблице css

  • автор:

Выравнивание текста вверху ячейки таблицы HTML: решение

Для эффективного вертикального выравнивания текста в ячейке таблицы вы можете использовать CSS стиль:

Скопировать код

.vertical-align-middle < /* Посредине действительно веселее */ vertical-align: middle; >

Применив этот класс к ячейке, вы увидите, что текст будет отцентрирован по вертикали:

Скопировать код

 
Текст в центре

Вместе с поддержкой возможностью изменения положения по вертикали, свойство vertical-align со значением middle создает нужный эффект!

Поддержка через CSS-классы

В веб-разработке очень важна поддержка. Использование CSS классов для управления стилями, таких как vertical-align , способствует сокращению HTML-кода и его повторному использованию в разных частях проекта.

Исследуем другие значения для вертикального выравнивания

В CSS существуют и другие способы вертикального выравнивания, помимо middle:

Выравнивание текста в списке с иконками

Как выровнять текст по вертикальной линии не меняя ширины разношироких иконок? Есть список со структурой:

    .
  • .

Желаемый результат

Иконки — svg разных размеров (ширина от 40px до 45px). Иконке задан margin-right и мы получаем проблему: Мой вариант 1 — иконки не соответствуют дизайну Если мы ставим фиксированную ширину иконки то текст получается по одной вертикальной линии (желаемый результат), но в таком случае иконки по размеру не соответствуют дизайну. Мой вариант 2 — текст не располагается по одной линии Если не трогать ширину иконки, то они выглядят как и задумано дизайнером, но текст идёт не по одной вертикальной линии (это недопустимо). Подскажите пожалуйста как красиво написать стили, чтобы иконки были разной ширины, а текст шёл по одной линии.

Отслеживать

задан 24 фев 2021 в 20:04

172 9 9 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Красиво тут не получится, ибо для красоты нужно иконки всё же «причесать» (думаю, что и по высоте иконки различаются).

ul < margin: 0; padding: 0; width: min-content; list-style-type: none; >li < display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; >.icon < height: 30px; box-shadow: inset 0 0 16px red; >.text < flex: 1; /* Вычитаем ширину самой большой иконки */ max-width: calc(100% - 50px); box-sizing: border-box; padding: 0 30px 0 10px; white-space: nowrap; box-shadow: inset 0 0 8px blue; >

  • Some text

  • Этот текст можно изменить

  • Hello world

Текст

Документация и примеры общих текстовых утилит для управления выравниванием, обтеканием, весом и т.д.

На этой странице

Выравнивание текста

Легко выравнивайте текст по компонентам с помощью классов выравнивания текста. Для выравнивания влево, вправо и по центру доступны адаптивные классы, которые используют те же контрольные точки по ширине области просмотра, что и система сетки.

Текст с выравниванием по левому краю для всех размеров области просмотра.

Выровненный по центру текст на всех размерах области просмотра.

Текст с выравниванием по правому краю для всех размеров области просмотра.

Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.

Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.

Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.

Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.

p class="text-start">Текст с выравниванием по левому краю для всех размеров области просмотра.p> p class="text-center">Выровненный по центру текст на всех размерах области просмотра.p> p class="text-end">Текст с выравниванием по правому краю для всех размеров области просмотра.p> p class="text-sm-start">Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.p> p class="text-md-start">Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.p> p class="text-lg-start">Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.p> p class="text-xl-start">Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.p>

Обратите внимание, что мы не предоставляем служебные классы для выравнивания текста по всей ширине. Хотя эстетически выровненный по ширине текст может выглядеть более привлекательно, он делает интервалы между словами более случайными и, следовательно, труднее читать.

Перенос текста и переполнение

Оберните текст классом .text-wrap .

Этот текст следует обернуть.

div class="badge bg-primary text-wrap" style="width: 6rem;"> Этот текст следует обернуть. div>

Запретить перенос текста с помощью класса .text-nowrap .

Этот текст должен переполнять родительский.

div class="text-nowrap bd-highlight" style="width: 8rem;"> Этот текст должен переполнять родительский. div>

Разрыв слова

Предотвратите разрушение макета ваших компонентов длинными строками текста, используя .text-break для установки word-wrap: break-word и word-break: break-word . Мы используем word-wrap вместо более обычного overflow-wrap для более широкой поддержки браузеров и добавляем устаревший word-break: break-word , чтобы избежать проблем с гибкими контейнерами.

p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

Обратите внимание, что разрыв слов на арабском языке невозможен, который является наиболее часто используемым языком RTL. Поэтому .text-break удаляется из нашего RTL-скомпилированного CSS.

Преобразование текста

Преобразование текста в компонентах с помощью классов капитализации текста.

Текст в нижнем регистре.

Текст в верхнем регистре.

p class="text-lowercase">Текст в нижнем регистре.p> p class="text-uppercase">Текст в верхнем регистре.p> p class="text-capitalize">Заглавный текст.p>

Обратите внимание, как .text-capitalize изменяет только первую букву каждого слова, не затрагивая регистр любых других букв.

Размер шрифта

Быстро изменить размер шрифта текста font-size . В то время как наши классы заголовков (например, .h1 – .h6 ) применяют font-size , font-weight и line-height , эти утилиты применяют только font-size . Размер этих утилит соответствует элементам заголовка HTML, поэтому по мере увеличения числа их размер уменьшается.

p class="fs-1">.fs-1 textp> p class="fs-2">.fs-2 textp> p class="fs-3">.fs-3 textp> p class="fs-4">.fs-4 textp> p class="fs-5">.fs-5 textp> p class="fs-6">.fs-6 textp>

Настройте свой доступный font-size , изменив карту Sass $font-sizes .

Толщина шрифта и курсив

С помощью этих утилит можно быстро изменить font-weight или font-style . Утилиты font-style сокращенно обозначаются как .fst-* , а утилиты font-weight сокращаются как .fw-* .

Более жирный текст (относительно родительского элемента).

Текст с нормальной толщиной.

Текст с легкой толщиной.

Более легкий текст (относительно родительского элемента).

Текст с обычным шрифтом

p class="fw-weight-bold">Жирный текст.p> p class="fw-weight-bolder">Более жирный текст (относительно родительского элемента).p> p class="fw-weight-normal">Текст с нормальной толщиной.p> p class="fw-weight-light">Текст с легкой толщиной.p> p class="fw-weight-lighter">Более легкий текст (относительно родительского элемента).p> p class="fst-italic">Курсивный текст.p> p class="fst-normal">Текст с обычным шрифтомp>

Высота линии

Измените высоту строки с помощью утилит .lh-* .

Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.

Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.

Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.

Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.

p class="lh-1">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p> p class="lh-sm">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p> p class="lh-base">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p> p class="lh-lg">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p>

Моноширинный

Измените выделение на наш стек моноширинных шрифтов с помощью .font-monospace .

Это в моноширинном пространстве

p class="font-monospace">Это в моноширинном пространствеp>

Сброс цвета

Сбросить цвет текста или ссылки с помощью .text-reset , чтобы он унаследовал цвет от своего родителя.

p class="text-muted"> Скрытый текст со a href="#" class="text-reset">ссылкой для сброса.a>. p>

Оформление текста

Украшайте текст в компонентах классами оформления текста.

Под этим текстом есть линия.

В этом тексте проходит линия.

p class="text-decoration-underline">Под этим текстом есть линия.p> p class="text-decoration-line-through">В этом тексте проходит линия.p> a href="#" class="text-decoration-none">Текстовое оформление этой ссылки удалено.a>

Sass

Переменные

// stylelint-disable value-keyword-case $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; // stylelint-enable value-keyword-case $font-family-base: var(--#$variable-prefix>font-sans-serif); $font-family-code: var(--#$variable-prefix>font-monospace); // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins // $font-size-base affects the font size of the body text $font-size-root: null; $font-size-base: 1rem; // Assumes the browser default, typically `16px` $font-size-sm: $font-size-base * .875; $font-size-lg: $font-size-base * 1.25; $font-weight-lighter: lighter; $font-weight-light: 300; $font-weight-normal: 400; $font-weight-bold: 700; $font-weight-bolder: bolder; $font-weight-base: $font-weight-normal; $line-height-base: 1.5; $line-height-sm: 1.25; $line-height-lg: 2; $h1-font-size: $font-size-base * 2.5; $h2-font-size: $font-size-base * 2; $h3-font-size: $font-size-base * 1.75; $h4-font-size: $font-size-base * 1.5; $h5-font-size: $font-size-base * 1.25; $h6-font-size: $font-size-base; 

Карты

Утилиты с размером шрифта генерируются из этой карты в сочетании с нашим API утилит.

$font-sizes: ( 1: $h1-font-size, 2: $h2-font-size, 3: $h3-font-size, 4: $h4-font-size, 5: $h5-font-size, 6: $h6-font-size ); 

API утилит

Утилиты шрифта и текста указаны в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.

 "font-family": ( property: font-family, class: font, values: (monospace: var(--#$variable-prefix>font-monospace)) ), "font-size": ( rfs: true, property: font-size, class: fs, values: $font-sizes ), "font-style": ( property: font-style, class: fst, values: italic normal ), "font-weight": ( property: font-weight, class: fw, values: ( light: $font-weight-light, lighter: $font-weight-lighter, normal: $font-weight-normal, bold: $font-weight-bold, bolder: $font-weight-bolder ) ), "line-height": ( property: line-height, class: lh, values: ( 1: 1, sm: $line-height-sm, base: $line-height-base, lg: $line-height-lg, ) ), "text-align": ( responsive: true, property: text-align, class: text, values: ( start: left, end: right, center: center, ) ), "text-decoration": ( property: text-decoration, values: none underline line-through ), "text-transform": ( property: text-transform, class: text, values: lowercase uppercase capitalize ), "white-space": ( property: white-space, class: text, values: ( wrap: normal, nowrap: nowrap, ) ), "word-wrap": ( property: word-wrap word-break, class: text, values: (break: break-word), rtl: false ), 
  • Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
  • Код под лицензией MIT, документация CC BY 3.0.
  • Текущая версия v5.0.2.

Как выровнять ссылку по центру в ячейке таблицы HTML

Не могу понять как центрировать по вертикали и горизонтали текст ссылки, когда ячейке присвоено display: block .

td < box-sizing: border-box; height: 75px; outline: 1px solid #7d7f7d; background: #999999 repeat; >td a

Отслеживать
задан 15 мая 2018 в 11:45
95 8 8 бронзовых знаков

Попробуйте text-align:center; (по вертикали) или воспользуйтесь css фреймворком Bootstrap — там есть класс для выравнивания текста в ячейке.

15 мая 2018 в 11:51
К сожалению, ваш способ не помогает.
15 мая 2018 в 11:57
попробуйте этот вариант ru.stackoverflow.com/questions/145856/…
15 мая 2018 в 11:58
Можно изменить display:block, на display:flex и добавить еще одно свойство align-items:center;
15 мая 2018 в 12:01

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Решение найдено, нужно использовать line-height: .

td < box-sizing: border-box; height: 75px; outline: 1px solid #7d7f7d; background: #999999 repeat; >a

Отслеживать
ответ дан 15 мая 2018 в 13:54
95 8 8 бронзовых знаков

Можно еще padding-top и padding-bottom проставить чтобы выровнять. Например, высота ячейки 75px , а размер шрифта 15px , тогда выставляем у ячейки padding-top и padding-bottom по 30px (чтобы в сумме было 30 + 30 + 15 = 75 ). Тогда текст окажется по середине.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *