X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Grid выравнивание контента внутри сетки
sergei_burg
sergei_burg
Topic Starter сообщение 21.7.2019, 16:46; Ответить: sergei_burg
Сообщение #1


<div class="fin-othet-wrapper">
<div class="fin-othet-block">Дата</div>
<div class="fin-othet-block">Сумма</div>
<div class="fin-othet-block">Приход от...</div>
<div class="fin-othet-block">1 января</div>
<div class="fin-othet-block">998 руб.</div>
<div class="fin-othet-block">Яндекс-кошелёк Пополнение с карты ****4061 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus fuga obcaecati optio pariatur iusto magni unde in voluptatum minima dolorem. Яндекс-кошелёк Пополнение с карты ****4061</div>
<div class="fin-othet-block">10 января</div>
<div class="fin-othet-block">300 руб.</div>
<div class="fin-othet-block">ЕКАТЕРИНА СЕРГЕЕВНА Д.</div>
</div>


[CSS]
.fin-othet-wrapper{
display: grid;
grid-template-columns: 100px 100px 400px;
grid-template-rows: repeat(autofit, 100%);
grid-column-gap:40px;
grid-row-gap:60px;
align-items: center;
}
.fin-othet-block{
height: 100px;
}
.fin-othet-block:nth-child(-n+3){
background-image: url("ftp://u69049_@u69049.netangels.ru/kotvdom.ru/www/img/sample.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 36px 36px;
height: 40px;
}
[/CSS]

У меня вот в чем вопрос если я уберу фиксированный размер
.fin-othet-block{
height: 100px;
}
то будет браться 100% которые я поставил
И содержание выровнится по центру блоку так как я поставил align-items: center;
но почему с пиксельными размерами не происходит того же эффекта
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
icoder
icoder
сообщение 22.7.2019, 7:20; Ответить: icoder
Сообщение #2


(sergei1980 @ 21.7.2019, 19:46) *
но почему с пиксельными размерами не происходит того же эффекта

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sergei_burg
sergei_burg
Topic Starter сообщение 22.7.2019, 14:07; Ответить: sergei_burg
Сообщение #3


(Proger @ 22.7.2019, 10:20) *
Это хорошо видно, если задать им какой-нибудь фоновый цвет.
Вам нужно выравнивать контент внутри блоков.

Вот разница

https://a.radikal.ru/a25/1907/65/a4650e66e7a1.png

https://a.radikal.ru/a04/1907/1d/4d9e79b856de.png

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

И видно как выравнилось по разному
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
icoder
icoder
сообщение 23.7.2019, 0:21; Ответить: icoder
Сообщение #4


(sergei1980 @ 22.7.2019, 17:07) *
в одном случае есть фиксированный размер в другом нет

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sergei_burg
sergei_burg
Topic Starter сообщение 23.7.2019, 0:48; Ответить: sergei_burg
Сообщение #5


(Proger @ 23.7.2019, 03:21) *
И в обоих случаях блоки выровнялись по центру ряда.
Повторюсь, вам нужно выровнять контент внутри блоков.


Я вижу что они выравнились и понимаю как можно выровнять внутри. У меня вопрос в том что почему контент ведет себя по разному, хотя было изменено проценты на пиксели. И я хочу понять как это работает
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
icoder
icoder
сообщение 23.7.2019, 1:41; Ответить: icoder
Сообщение #6


(sergei1980 @ 23.7.2019, 03:48) *
У меня вопрос в том что почему контент ведет себя по разному, хотя было изменено проценты на пиксели. И я хочу понять как это работает

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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sergei_burg
sergei_burg
Topic Starter сообщение 23.7.2019, 2:51; Ответить: sergei_burg
Сообщение #7


(Proger @ 23.7.2019, 04:41) *
Контент ведет себя одинаково. В обоих случаях он прижат к верхнему краю блока.
Просто, когда вы задаете фиксированный размер, блок получается больше чем необходимо контенту, и снизу остается пустое место.


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыA-Parser 1.1 - продвинутый парсер ПС, кейвордов, контента, показателей, 70+ парсеров.
352 Forbidden 278195 21.3.2024, 14:38
автор: AParser_Support
Открытая тема (нет новых ответов) Дайте бесплатного контента! :)
2 Tia2 984 22.12.2023, 18:53
автор: zyzy
Горячая тема (нет новых ответов) Занимаюсь добычей качественного контента из Вебархива. Опыт уже более трех лет
Предоставляю только качественный, читабельный контент.
62 kuz999 37957 27.7.2023, 13:55
автор: kuz999
Открытая тема (нет новых ответов) Нужна помощь по обмену рублей ETXT внутри биржи на Приват
2к рублей
3 TalanArtem 1065 8.3.2023, 0:07
автор: анатасия228
Открытая тема (нет новых ответов) P2P оффер, 4% с ордера | РФ | Арбитраж RUB внутри страны
1 LebedevStr 694 28.2.2023, 21:30
автор: LebedevStr


 



RSS Текстовая версия Сейчас: 28.3.2024, 17:52
Дизайн