Динамічне центрування елемента в контейнері за допомогою CSS

Коли справа доходить до написання про розробку, я не часто говорю про речі, окрім PHP і JavaScript, головним чином тому, що я працюю з цими мовами більше, ніж з іншими.

Я маю на увазі, так, CSS є частиною угоди, як і HTML, але це очікується сьогодні, чи не так?

Тож якщо я коли-небудь міг дати коротку пораду щодо CSS, то це вона (хоча, можливо, мені варто написати більше?). Важко, коли Кріс виконує таку чудову роботу, запускаючи CSS Tricks, але я відволікаюся.

У будь-якому випадку, ось проблема і рішення.

Динамічне центрування елемента в контейнері

Ідея динамічного центрування елемента базується на такому сценарії:

• Ви робите виклик до API, який відповість набором, скажімо, зображень після завершення виклику.
• Кожне зображення потрібно розташувати по центру всередині контейнера.
• Зображення не матимуть фіксованої висоти, їх потрібно динамічно розташовувати та центрувати в контейнерах інтерфейсу користувача.

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

Пам’ятайте: ви не можете розміщувати такі речі, як елементи div в елементах li (оскільки div є елементом рівня блоку), не змінивши його за допомогою CSS. І ми хочемо цього уникнути.

Отже, зрештою інтерфейс користувача може виглядати приблизно так (я знаю, грубо):

Якщо ви хочете, щоб кожне зображення було розміщено в межах елемента списку, ви хочете, щоб воно мало певну масштабовану висоту, і ви хочете, щоб воно було по центру, спробуйте такий біт коду :

.acme-element {
  position:   relative;
  top:        50%;
  transform:  translateY(-50%);
  height:     auto;
  max-height: 190px;
}

Ключем до цього, насправді, є стиль трансформації. Згідно з MDN :

Функція CSS translateY() змінює положення елемента вертикально на двовимірній площині. Його результатом є тип даних.

Мати сенс?

Подумайте про це так: функція translateY візьме заданий елемент (ідентифікований його селектором) і позиціонуватиме його, використовуючи вказане значення.

Це про трансформації

Ви можете використовувати пікселі, відсотки або будь-що інше, що вам потрібно, щоб це сталося. В даному випадку це відсотки (і вони від’ємні). Хоча я використовую приклад своєї реалізації, він також призначений для підказки щодо використання функції transformY по відношенню до трансформацій.

Якщо сумісність веб-переглядача має значення, а в деяких випадках це має бути, перегляньте цю таблицю. Ви досить добре охоплені.