Чистый CSS: центрирование по вертикали и горизонтали абсолютно позиционируемого элемента с шириной в зависимости от дочерних элементов - PullRequest
Новая
       7

Чистый CSS: центрирование по вертикали и горизонтали абсолютно позиционируемого элемента с шириной в зависимости от дочерних элементов

0 голосов
/ 28 мая 2018

Итак ... Я получил этот код: https://jsfiddle.net/jmg63s3e/1/

Код на самом деле работает нормально, если вы измените размер окна браузера, пока у вас не будет text, встроенного в image, и это то, что я 'Я пытаюсь достичь этого, но если вы уменьшите его, в конечном итоге text упадет ниже image, даже если ширина wrapper намного меньше ширины окна.

Моя единственная цель - иметь:

  • все wrapper по центру как по вертикали, так и по горизонтали в окне браузера.Его общая ширина и высота неизвестны, в зависимости от его дочерних элементов
  • row1 и row2 не должны быть встроенными: row2 должен быть ниже row1
  • Все элементы внутри row1 (image и text, содержащие 2 пролета) должны быть встроены друг в друга
  • И, ну, spinner внутри row2 также должны быть центрированы внутри ряда, но это никогда не былопроблема, какое бы решение я ни пытался

На самом деле единственным динамическим элементом во всем коде является первый диапазон, который в примере содержит Player #1, так как это должно быть имя игрока иэто может быть что угодно, любой длины.

Конечно, если я хочу сделать его отзывчивым, мне придется использовать медиа-запросы или динамически изменять ширину, высоту и размер шрифта с JS, и я готов это сделать,Моя проблема здесь - только сам wrapper и text, который опускается ниже image, даже если ширина wrapper намного меньше ширины окна, поэтому я прошу решение, которое работает так долготак как ширина wrapper меньше ширины окна.Когда ширина wrapper станет меньше ширины окна, я буду обрабатывать стиль с помощью адаптивных медиа-запросов или JS.Я просто хотел бы, чтобы wrapper располагался по центру как по вертикали, так и по горизонтали в окне, а его размер был динамическим и зависел от детей.

Я уже пробовал любое решение, о котором я мог подумать,но с неизвестной шириной wrapper я просто не могу понять это.Может кто-то помочь мне, пожалуйста?Я открыт для любого предложения и любого решения, если оно чисто CSS и не связано с JS.Спасибо всем заранее

1 Ответ

0 голосов
/ 28 мая 2018

Вы можете использовать flexbox для решения этих проблем.

Вот обновленная скрипка со старым комментарием CSS: https://jsfiddle.net/jmg63s3e/3/

Во-первых, чтобы выровнять оболочку по горизонтали и вертикали, вам нужно сделать родительский контейнер гибким контейнером с display: flex ииспользуйте justify-content: center и align-items: center.Вам также нужно установить рост, иначе он будет перенесен на рост ребенка и не даст вам центрирующего эффекта.Я использовал следующее.Высота может быть любой, какой вам нужно. 

.trump-waiting {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  overflow: hidden;
  height: 100vh;
}

Далее я использовал display: flex на обёртке и flex-direction: column, чтобы убедиться, что все они выстроены так, как мы хотим. 

.trump-waiting .wrapper {
  display:flex;
  flex-direction:column;

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

.trump-waiting .row1 {
  display: flex;
  flex-direction: row;
  /* display: inline-block; */
  /* height: 60px; */
  background-color: yellow;
}

Я также добавил flex-shrink:0 к .image , чтобы он не уменьшался при изменении размера.

Чтобы Игрок № 1 и «выбирал козырный костюм», я также добавил display: flex и flex-direction: row к .row, чтобы они оставались на одной линии.

Наконец, чтобы выровнять загрузчик,Я сделал трюк с вертикальным / горизонтальным выравниванием, использованный выше, а также добавил некоторые отступы в div, чтобы освободить место, и удалил старый css. 

.trump-waiting .row2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 16px 0;
  /* display: block; */
  /* margin-top: 50px; */

Последний шаг - использование медиазапросов для настройкиразмеры шрифта на .text охватывают, поэтому шрифт не расширяет свой контейнер при изменении размера.

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

РЕДАКТИРОВАТЬ: Понял, что я сделал ошибку, суммируя CSS в jsfiddle, а также удалил избыточныйсобственность css.Сейчас обновлено.

...