Как прижать текст к верху css

Как прижать текст к верху строки?

не получаеся применить vertical-align: top. Не пойму почему.
Нужно цифру ’25 600 000 ₽ прижать к верху строки.

 
Апартаменты в «башне ОКО»
 
Лот № 4536
 
25 600 000 ₽
 
Площадь 70 м² Этаж 52
 
365 714 ₽ за м²
 Назначить просмотр 

html < font-size: 16px; >.card .pic < width: 555px; height: 300px; >.card .title_app < font-size: 1rem; line-height: 1.67rem; color: black; margin-top: 30px; >.card .lot < font-size: 1rem; line-height: 1.5rem; color: black; >.card .price

• Вопрос задан более двух лет назад
• 1108 просмотров

2 комментария

Простой 2 комментария

Антон Литвиненко @AntonLitvinenko

Как прижать текст к верху ячейки в таблице

Как прижать контейнер к верху
Добрый день, есть страница и стиль. Вопрос заключается в следующем как прижать <div.

Прижать блог к верху
Приветствую уважаемые форумчане. Подскажите пожалуйста как прижать блок к верху. В.

Прижать картинку к верху блока
есть противный отступ у картинки от верха блока, нужно прижать ее к самому верху. получается.

Как прижать картинку к краям ячейки?
картинка отлипает от нижнего края ячейки таблицы на 2 пикселя. Уже голову сломал. Уже все что мог.

3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4

1 2 3

td{ vertical-align: top; }

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Прижать изображение в таблице
Всем привет. Никак не могу победить пробел между изображением и нижним краем строки таблицы. <tr>.

Прижать ДИВ к низу ячейки
Здравствуйте скажите как прижать ДИВ к низу ячейки? vertical-align:bottom; в мозиле и ИЕ.

Картинка и текст по верху
Как мне сделать вот так, как нарисовано на картинке, а то у меня получается что текст начинается не.

Не получается прижать меню друг к другу в таблице
Что-то я никак не могу понять, вроде бы вещь элементарная, а никак что-то не получается! Нужно.

Прижать к верхнему краю текст в input

Создал поле для ввода, но текст в нем начинает печататся с центра. Как исправить?

Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 3 янв 2019 в 13:25
Илья Фамин Илья Фамин
3 5 5 бронзовых знаков

2 ответа 2

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

Скорее всего, для этих целей, вам нужен тег

Отслеживать
user262779
ответ дан 3 янв 2019 в 13:27
flapenguin flapenguin
1,584 7 7 серебряных знаков 12 12 бронзовых знаков

Для такого рода элементов есть тег . Если же вам нужен именно input , то задайте не высоту, а padding :

input

Отслеживать
ответ дан 3 янв 2019 в 13:28
Nikita Rogatnev Nikita Rogatnev
1,663 9 9 серебряных знаков 30 30 бронзовых знаков
Тебе +1 Никита, так как ты более подробнее расписал с двумя вариантами
– user262779
3 янв 2019 в 14:14

• html
• css
• вёрстка
• input

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как прижать текст к верху css

Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:

• stretch : значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера
• flex-start : элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера
• flex-end : элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера
• center : элементы выравниваются по центру flex-контейнера
• baseline : элементы выравниваются в соответствии со своей базовой линией

Выравнивание при расположении в строку:

     .flex-container < display: flex; border:1px #ccc solid; height:5em; >.flex-start < align-items: flex-start; >.flex-end < align-items: flex-end; >.center < align-items: center; >.baseline < align-items: baseline; >.flex-item < text-align:center; font-size: 1em; padding: 1.2em; color: white; >.largest-item < padding-top:2em; >.color1 .color2 .color3 .color4 
Flex-start
 
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
Flex Item 4
 
 
Flex-end
 
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
Flex Item 4
 
 
Center
 
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
Flex Item 4
 
 
Baseline
 
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
Flex Item 4
 
  

Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:

.flex-container

Свойство align-self

Свойство align-self позволяет переопределить значение свойства align-items для одного элемента. Оно может принимать все те же значения плюс значение «auto»:

• auto : значение по умолчанию, при котором элемент получает значение от свойства align-items , которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение stretch .
• stretch
• flex-start
• flex-end
• center
• baseline

     .flex-container < display: flex; border:1px #ccc solid; justify-content: space-between; align-items: stretch; height:12em; >.flex-item < text-align:center; font-size: 1em; padding: 1.2em; color: white; >.item1 .item2 .item3 .item4 
Align-self
 
Flex Item 1
 
Flex Item 2
 
Flex Item 3
 
Flex Item 4
 
  

Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch; . Однако каждый из элементов переопределяет это поведение: