Css valign: align-content — CSS: Cascading Style Sheets

С другой стороны, при правильном использовании (на встроенном или встроенном блочном элементе) свойство vertical-align заставит целевой элемент выравниваться относительно других встроенных элементов.

То, насколько высоко вверх или вниз выровнен элемент, будет зависеть от размера встроенных элементов в той же строке или от высоты строки, установленной для этой строки.

Некоторые визуальные элементы

Вот наглядная демонстрация вместе с пояснительным текстом, которая поможет вам понять, что происходит, когда вы выравниваете встроенный элемент по вертикали:

вверху:

• Посмотреть демонстрацию

Значения ключевых слов

Различные значения ключевых слов, которые вы можете использовать с vertical-align :

• baseline (значение по умолчанию или «начальное»)
• дно
• средний
• суб
• супер
• текст снизу
• текст-верхний
• топ

Скорее всего, вы не будете использовать многие из них, но полезно знать, какой широкий выбор у вас есть. Например, на демо-странице, поскольку значение vertical-align имеет значение «top» для элемента ввода, он выравнивается по самому высокому элементу в строке (большому изображению).

Но если вы не хотите выравнивать элемент относительно изображений или других блочных встроенных элементов, вместо этого вы можете выбрать значения text-top или text-bottom , чтобы элемент отношение к тексту в строке.

О значении «middle»

Обновление : (7 декабря 2011 г.) Одна вещь, которую я не объяснил в исходной статье (потому что сначала не понял), как работает значение «middle». . Благодаря комментариям Пабло Ботты.

К сожалению, vertical-align: middle не выровняет встроенный элемент по середине самого большого элемента в строке (как и следовало ожидать). Вместо этого значение middle приведет к тому, что элемент будет выровнен по середине гипотетического нижнего регистра «x» (также называемого «x-height»). Итак, мне кажется, что это значение на самом деле должно называться «text-middle», чтобы правильно определить, что оно делает.

Посмотрите эту демонстрацию, где я увеличил размер шрифта, чтобы высота x стала намного больше. Так что вообще говоря, значение «средний» не будет использоваться очень часто.

Значения, не являющиеся ключевыми словами

Возможно, вы не знаете, что вертикальное выравнивание принимает значения длины и процента. Таким образом, все это были бы допустимые примеры:

.
вход {
  вертикальное выравнивание: 100 пикселей;
}
охватывать {
  вертикальное выравнивание: 50%;
}
картинка {
  вертикальное выравнивание: -300px;
}
 

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

Заключение

Если я могу подытожить, как использовать это традиционно неправильно понимаемое свойство в одном предложении, я бы сказал: используется в ячейке таблицы, это повлияет на выравнивание самого элемента, а не содержимого элемента.

Обновление : кажется, я пытался упростить смысл здесь, но изначально я не упомянул, что когда я говорю о «встроенных» элементах, это также будет включать в себя встроенные блочные элементы. Спасибо Брайану Айришу за указание на это.

Все, что вам нужно знать (CSS)

05 марта 2014 г.

   
 Нам нужно
       
      говорить
       
      об этом! 
 

Да, давайте поговорим о свойстве CSS vertical-align . Он предназначен для выравнивания текста и элементов рядом друг с другом. Например, центрирование значка рядом с текстом.

Но иногда он может быть настоящим отморозком со всеми его, казалось бы, таинственными правилами в действии. Например, может случиться так, что элемент, который вы изменили vertical-align for вообще не меняет выравнивание, но другие элементы рядом с ним меняют! Какая радость!

Итак, чтобы свести к минимуму проблемы в будущем, я просмотрел спецификации CSS W3C, чтобы разъяснить поведение вертикального выравнивания раз и навсегда .

Давайте разберемся с правилами игры!

Что вы узнаете из этой статьи:

1. Выравнивание по вертикали действует на элементы встроенного уровня в линейном блоке. ⬀
2. Элементы встроенного уровня и линейные блоки имеют базовые, верхние и нижние линии. ⬀
3. Вертикальное выравнивание Выравнивает базовые, верхние и нижние линии. ⬀
4. Пример: как расположить значок по центру рядом с фрагментом текста. ⬀
5. Пример: Как может двигаться базовая линия. ⬀
6. Пример: Как центрировать элементы по вертикали без зазора внизу. ⬀
7. Пример: Как убрать зазор между двумя выровненными элементами. ⬀

Vertical-Align Воздействует на элементы встроенного уровня в линейном блоке

vertical-align используется для выравнивания элементов встроенного уровня. Это элементы, чье свойство display оценивается как

• встроенное,
• встроенный блок или
• inline-таблица (в данной статье не рассматривается).

Строчные элементы в основном представляют собой теги, оборачивающие текст.

Встроенные блочные элементы — это то, что следует из их названия: блочные элементы, живущие в строке. Они могут иметь ширину и высоту (возможно, определяемые собственным содержимым), а также отступы, границы и поля.

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

   
 Высокий
     
    в строке текста. 
 Короткий
     
    в строке текста. 

      Этот
       
      Можно
       
      случаться. 
 

Поле, на котором мы играем, очерчено линиями. Внутри этих строк свойство vertical-align отвечает за выравнивание отдельных элементов. Итак, по чему выравниваются элементы?

Самая важная контрольная точка для вертикального выравнивания — это базовая линия задействованных элементов. В некоторых случаях также важны верхняя и нижняя кромка охватывающей элементы рамки. Давайте посмотрим, где находятся базовая линия и внешние края для каждого задействованного типа элемента:

Встроенный элемент

   
 ААА QQ 
 
 ААА QQ 
 

           AA QQ 
 

Здесь вы видите три строки текста рядом друг с другом. Верхний и нижний края высоты строки обозначены красными линиями, высота шрифта — зелеными линиями, а базовая линия — синей линией. Слева текст имеет высоту строки, установленную на 90 254, ту же высоту 90 255, что и размер шрифта. Зеленая и красная линии свернулись в одну линию с каждой стороны. В середине высота строки в два раза больше , чем размер шрифта. Справа высота строки составляет 90 254 и вдвое меньше 90 255 размера шрифта.

Внешние края встроенного элемента выравниваются с верхним и нижним краями его высоты строки. Это не имеет значения , если высота строки меньше высоты шрифта. Итак, внешние края — это красные линии на рисунке выше.

Базовая линия встроенного элемента — это строка, символы сидячие на. Это синяя линия на рисунке. Грубо говоря, базовая линия где-то ниже середины высоты шрифта . Подробное определение см. в спецификациях W3C.

Встроенный блочный элемент

Слева направо вы видите: встроенный блочный элемент с входящим содержимым (a «c»), встроенный блочный элемент с входящим содержимым и переполнением : скрытый и встроенный блочный элемент с нет in-flow контента (но область контента имеет высоту). Границы поля обозначены красными линиями, граница желтая, отступы зеленые, а область содержимого синяя. Базовая линия каждого элемента встроенного блока показана синей линией.

Внешние края элемента Inline-block являются верхним и нижним краями поля поля. Это красные линии на рисунке.

Базовая линия элемента Inline-block зависит от того, имеет ли элемент встроенное содержимое:

• В случае встроенного содержимого базовая линия элемента встроенного блока является базовой линией последнего элемента содержимого в обычном потоке (пример слева). Для этого последнего элемента базовая линия находится по его собственным правилам.
• В случае содержимого в потоке, но свойство переполнения оценивается как нечто отличное от visible , базовой линией является нижний край поля поля (пример посередине). Таким образом, это то же самое, что и нижний край элемента встроенного блока.
• В случае содержимого no in-flow базовая линия снова является нижним краем поля (пример справа).

Линейная коробка

     
 х
            Этот
             
            Можно
             
            случаться.  
 

Вы уже видели эту настройку выше. На этот раз я нарисовал верхнюю и нижнюю часть текстового поля строки (зеленый, подробнее об этом ниже), а также базовую линию (синюю). Я также выделил области текстовых элементов, задав им серый фон.

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

Базовая линия строки является переменной:

CSS 2.1 не определяет положение базовой линии строки.

— Спецификации W3C

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

Поскольку базовая линия линейного прямоугольника невидима, может быть не сразу понятно, где он находится. Но вы можете сделать это видимым очень легко. Просто добавьте символ в начале строки в вопросах, как я добавил «x» на рисунке. Если этот символ никак не выровнен, он по умолчанию будет располагаться на базовой линии.

Вокруг своей базовой линии поле линии имеет то, что мы могли бы назвать текстовым полем . Текстовое поле можно просто рассматривать как встроенный элемент внутри строкового поля без какого-либо выравнивания. Его высота равна размеру шрифта родительского элемента. Таким образом, текстовое поле просто заключает в себе неформатированный текст строки. Коробка обозначена зелеными линиями на рисунках выше. Поскольку это текстовое поле привязано к базовой линии, оно перемещается вместе с базовой линией. (Примечание: это текстовое поле называется strut в спецификациях W3C)

Уф, это была трудная часть. Теперь мы знаем все, чтобы взглянуть на ситуацию . Давайте быстро суммируем самые важные факты:

• Существует область, называемая line box . Это область, в которой происходит вертикальное выравнивание. Он имеет базовую линию , текстовое поле и верхний и нижний край .
• Имеется элемента встроенного уровня . Это объекты, которые выровнены. У них есть базовая линия и верхняя и нижняя кромка .

При использовании вертикального выравнивания контрольные точки, упомянутые в списке выше, устанавливаются в определенное соотношение.

Выравнивание относительно базовой линии строки

    
         Икс
            исходный уровень
             суб
             супер
             -50%
             +10 пикселей
        
    
 

• базовая линия : базовая линия элемента находится точно над базовой линией линейного блока.
• sub : Базовая линия элемента смещена ниже базовой линии строки.
• super : базовая линия элемента смещена выше базовой линии строки.
• : Базовая линия элемента смещена относительно базовой линии блока строки на процент относительно высоты строки.
• : Базовая линия элемента смещена относительно базовой линии строки на абсолютную длину.

Особый случай вертикальное выравнивание: среднее заслуживает отдельной цифры:

    
          Икс
              середина
            
        
    
 

• середина : средняя точка между верхним и нижним краями элемента выравнивается по базовой линии линейного блока плюс половина x-высоты.

Выравнивание относительно текстового поля строки

    
            Икс
        
              текст сверху
            
              текст внизу
            
        
    
 

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

• text-top : Верхний край элемента выравнивается по верхнему краю текстового поля строки.
• text-bottom : Нижний край элемента выравнивается по нижнему краю текстового поля строки.

Выравнивание относительно внешних краев линейной рамки

    
            Икс
        
              Топ
            
              нижний
            
        
    
 

• top : Верхний край элемента выравнивается по верхнему краю строки.
• нижний : Нижний край элемента выравнивается по нижнему краю строки.

Формальное определение можно найти, конечно же, в спецификациях W3C.

Почему вертикальное выравнивание ведет себя именно так

Теперь мы можем более подробно рассмотреть вертикальное выравнивание в определенных ситуациях. В частности, мы будем иметь дело с ситуациями, когда что-то могло пойти не так.

Центрирование значка

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

   
 По центру? 
 
 По центру! 
 

 
<промежуток> 
По центру?

<промежуток> 
По центру!
<тип стиля="текст/CSS">
  .icon { дисплей: встроенный блок;
            /* размер, цвет и т. д. */ }
  .middle { вертикальное выравнивание: среднее; }
 

Вот пример снова, но я нарисовал некоторые вспомогательные линии, которые вы уже знаете сверху:

   
 х
        
           
            По центру? 
 

        
           
            По центру! 
 

Это проливает свет на наш вопрос. Поскольку текст слева вообще не выровнен, он находится на базовой линии. Дело в том, что, выравнивая блок с помощью vertical-align: middle , мы выравниваем его по середине строчных букв без надстрочных элементов (половина x-высоты). Итак, вверху выделяются символы с надстрочными элементами.

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

Перемещение базовой линии линейного блока

Это распространенная ошибка при работе с параметром vertical-align : положение базовой линии линейного блока зависит от всех элементов в этой строке. Предположим, элемент выровнен таким образом, что базовая линия линейного блока должна двигаться. Поскольку большая часть выравнивания по вертикали (кроме верхнего и нижнего) выполняется относительно этой базовой линии, это также приводит к скорректированному положению всех других элементов в этой строке.

Примеры:

• Если в строке есть высокий элемент, охватывающий всю высоту, вертикальное выравнивание не действует на него. Над его вершиной и под его низом нет пространства, которое позволяло бы ему двигаться. Чтобы выполнить выравнивание относительно базовой линии линейного блока, базовая линия линейного блока должна двигаться. Короткий блок имеет выравнивание по вертикали: базовая линия . Слева высокое поле выровнено text-bottom . Справа выравнивается text-top . Вы можете видеть, как базовая линия прыгает вверх, забирая с собой короткую коробку.

   
  <промежуток> 
  <промежуток> 
  
  <промежуток> 
  <промежуток> 
  <тип стиля="текст/CSS">
    .высокая коробка,
    .short-box { display: inline-block;
                  /* размер, цвет и т.  д. */ }
    .text-bottom { вертикальное выравнивание: text-bottom; }
    .text-top { вертикальное выравнивание: text-top; }
   

  То же самое происходит при выравнивании высокого элемента с другими значениями для vertical-align .

• Даже установка вертикального выравнивания по снизу (слева) и сверху (справа) перемещает базовую линию. Это странно, так как базовая линия вообще не должна быть задействована.

   
  <промежуток> 
  <промежуток> 
  
  <промежуток> 
  <промежуток> 
  <тип стиля="текст/CSS">
    .высокая коробка,
    .short-box { display: inline-block;
                 /* размер, цвет и т. д. */ }
    .bottom { вертикальное выравнивание: дно; }
    .top { вертикальное выравнивание: сверху; }
   

• При размещении двух больших элементов в линию и их вертикальном выравнивании базовая линия перемещается там, где она соответствует обоим выравниваниям. Затем регулируется высота строки строки (слева). Добавление третьего элемента, который не выходит за края строки из-за его выравнивания, не влияет ни на высоту строки, ни на положение базовой линии (посередине). Если он *выходит* за края линейного блока, высота и базовая линия линейного блока снова корректируются. В этом случае наши первые два ящика сдвинуты вниз (справа).

   
  <промежуток> 
  <промежуток> 
  
  <промежуток> 
  <промежуток> 
  <промежуток> 
  
  <промежуток> 
  <промежуток> 
  <промежуток> 
  <тип стиля="текст/CSS">
    .tall-box { display: inline-block;
                   /* размер, цвет и т. д. */ }
    .middle { вертикальное выравнивание: среднее; }
    .text-top { вертикальное выравнивание: text-top; }
    .text-bottom { вертикальное выравнивание: text-bottom; }
    . text-100up { вертикальное выравнивание: 100%; }
   

Под элементами встроенного уровня может быть небольшой зазор

Взгляните на этот параметр. Обычно вы пытаетесь выровнять по вертикали или элементов списка.

 <ул>
  

  

  


<тип стиля="текст/CSS">
  .box { дисплей: встроенный блок;
         /* размер, цвет и т. д. */ }
 

Как видите, элементы списка находятся на базовой линии. Ниже базовой линии находится некоторое пространство для укрытия нижних элементов текста. Это вызывает разрыв. Решение? Просто переместите базовую линию в сторону, например, выровняв элементы списка с помощью vertical-align: middle :

 <ул>
  

  

  


<тип стиля="текст/CSS">
  .box { дисплей: встроенный блок;
            /* размер, цвет и т.  д. */ }
  .middle { вертикальное выравнивание: среднее; }
 

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

Промежуток между элементами встроенного уровня нарушает компоновку

В основном это проблема самих элементов встроенного уровня. Но так как они являются требованием вертикального выравнивания, полезно об этом знать.

Вы можете видеть этот пробел в предыдущем примере между элементами списка. Зазор возникает из-за пробелов между встроенными элементами, присутствующими в вашей разметке. Все пробелы между встроенными элементами свернуты в один пробел. Это пространство мешает, если мы хотим разместить два встроенных элемента рядом друг с другом и дать им 9Ширина 0015: 50% , например. Недостаточно места для двух 50%-элементов и пробела. Таким образом, строка разбивается на две строки, разрушая макет (слева). Чтобы удалить пробел, нам нужно удалить пробел, например, с html-комментариями (справа).

  
 
 Ширина 50% 
 
 Ширина 50%... и в следующей строке 
 
 Ширина 50% 
 
 Ширина 50% 
 

 
Ширина 50 %
Ширина 50%... и на следующей строке

   
Ширина 50%
Ширина 50%
<тип стиля="текст/CSS">
  .half { дисплей: встроенный блок;
          ширина: 50%; }
 

Демистификация вертикального выравнивания

Да, вот оно. Это не очень сложно, если знать правила. Если вертикальное выравнивание не работает, просто задайте следующие вопросы:

• Где базовая линия, а также верхний и нижний край строки?
• Где находится базовая линия, а также верхний и нижний края элементов встроенного уровня?

Это поможет решить проблему.

Вот более сложный пример вертикального центрирования элемента в

с vertical-align: middle .

Typography API — Material UI

Редактировать эту страницу

Документация по API для компонента React Typography. Узнайте о доступных реквизитах и ​​CSS API.

Import

 import Typography from '@mui/material/Typography';
// или же
импортировать { Типографику } из '@mui/material'; 

Вы можете узнать о разнице, прочитав это руководство по минимизации размера пакета.

Название компонента

Имя MuiTypography можно использовать при предоставлении реквизитов по умолчанию или переопределений стиля в теме.

Реквизиты

Реквизиты собственного компонента также доступны.

Имя	Тип	По умолчанию	Описание
align	‘center’ 93 | «наследовать» | ‘оправдать’ | ‘левый’ | ‘right’	‘inherit’	Установите выравнивание текста для компонента.
дети	узел		Содержимое компонента.
классы	объект		Переопределение или расширение стилей, примененных к компоненту. Дополнительные сведения см. в разделе CSS API ниже.
компонент	elementType		Компонент, используемый для корневого узла. Либо строка для использования HTML-элемента, либо компонента.
gutterBottom	bool	false	Если true , текст будет иметь нижнее поле.
noWrap	bool	false	Если true , текст не будет перенесен, а вместо этого будет обрезан многоточием. Обратите внимание, что переполнение текста может произойти только с блочными или встроенными блочными элементами (для переполнения элемент должен иметь ширину).
абзац	bool	false	Если true , элемент будет элементом абзаца.
sx	Array | объект | бул> | функция | object		Системная поддержка, которая позволяет определять системные переопределения, а также дополнительные стили CSS. См. страницу `sx` для более подробной информации.
вариант	‘тело1’ | ‘тело2’ | ‘кнопка’ | ‘заголовок’ | ‘ч2’ | ‘h3’ | ‘ч4’ | ‘ч5’ | ‘ч5’ | ‘h6’ | «наследовать» | ‘выше линии’ | ‘подзаголовок1’ | ‘подзаголовок2’ | string	‘body1’	Применяет стили оформления темы.
вариант отображения	объект	{ h2: ‘h2’, h3: ‘h3’, h4: ‘h4’, h5: ‘h5’, h5: ‘h5’, h6: ‘h6’, подзаголовок1: ‘h6’, подзаголовок2: ‘h6’, тело1: ‘р’, тело2: ‘р’, наследовать: ‘р’, }	Компонент сопоставляет свойство варианта с рядом различных типов элементов HTML. Например, subtitle1 на . Если вы хотите изменить это сопоставление, вы можете указать свое собственное. В качестве альтернативы вы можете использовать реквизит компонента .

Будучи утилитой CSS, компонент Typography также поддерживает все свойства системы . Вы можете использовать их в качестве реквизита непосредственно в компоненте.

ref пересылается корневому элементу.

CSS

.

Наименование правила	Глобальный класс	Описание
ROOT	. MuitionPography-ROTOT
body2	.MuiTypography-body2	Стили применяются к корневому элементу, если variant="body2" .
body1	.MuiTypography-body1	Стили применяются к корневому элементу, если вариант="тело1" .
заголовок	.MuiTypography-caption	Стили, применяемые к корневому элементу, если variant="caption" .
кнопка	.MuiTypography-button	Стили применяются к корневому элементу, если variant="button" .
h2	.MuiTypography-h2	Стили применяются к корневому элементу, если variant="h2" .
h3	. MuiTypography-h3	Стили, применяемые к корневому элементу, если variant="h3" .
h4	.MuiTypography-h4	Стили применяются к корневому элементу, если variant="h4" .
h5	.MuiTypography-h5	Стили применяются к корневому элементу, если variant="h5" .
h5	.MuiTypography-h5	Стили применяются к корневому элементу, если вариант="h5" .
h6	.MuiTypography-h6	Стили применяются к корневому элементу, если variant="h6" .
subtitle1	.MuiTypography-subtitle1	Стили применяются к корневому элементу, если variant="subtitle1" .
subtitle2	.MuiTypography-subtitle2	Стили применяются к корневому элементу, если variant="subtitle2" .
overline	.MuiTypography-overline	Стили применяются к корневому элементу, если variant="overline" .
наследовать	.MuiTypography-наследовать	Стили, применяемые к корневому элементу, если variant="inherit" .
alignLeft	.MuiTypography-alignLeft	Стили применяются к корневому элементу, если align="left" .
alignCenter	.MuiTypography-alignCenter	Стили применяются к корневому элементу, если align="center" .
alignRight	. MuiTypography-alignRight	Стили применяются к корневому элементу, если align="right" .
alignJustify	.MuiTypography-alignJustify	Стили применяются к корневому элементу, если align="justify" .
noWrap	.MuiTypography-noWrap	Стили применяются к корневому элементу, если nowrap={true} .
gutterBottom	.MuiTypography-gutterBottom	Стили применяются к корневому элементу, если gutterBottom={true} .
абзац	.MuiTypography-абзац	Стили, применяемые к корневому элементу, если абзац={true} .

Вы можете переопределить стиль компонента, используя один из следующих параметров настройки:

• С глобальным именем класса.