Несколько схем центрирования CSS, о которых вы не знали!

CSS

Автор: Ахмад Шадид Переводчик: Front-end Xiaozhi Источник: ishadeed

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Центрировано по горизонтали

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

Чтобы сделать встроенные элементы, такие как ссылки,spanилиimg) центрировать, использоватьtext-align: centerдостаточно.

<div class="desk">
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Для нескольких встроенных элементов вы также можете использоватьtext-align：center:

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>

.desk {
  text-align: center;
}

Flexbox

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

.desk {
  display: flex;
  justify-content: center;
}

Также работает нормально для нескольких оборудованных проектов:

CSS Grid

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

.desk {
  display: grid;
  justify-content: center;
}

блочный элемент

Auto Margin

Элементы блока с известной шириной и высотой могут быть установлены с помощьюmargin-left:autoа такжеmargin-right:autoОтцентрируйте элемент.

.plate {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

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

.tray {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Flexbox

То же самое используется для flexboxjustify-content:center для центрирования элемента:

.desk {
  display: flex;
  justify-content: center;
}

Для нескольких элементов нам не нужно оборачивать их в один элемент, flexbox может центрировать их все.

CSS-позиционирование

С абсолютным позиционированием мы можем легко передать CSStransformОтцентрируйте его по горизонтали.

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Вместо преобразования CSS можно использовать отрицательные поля, если известна ширина элемента.

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}

Центрировать по вертикали

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

Vertical Padding

Один из самых простых способов центрировать элемент по вертикали — использоватьpadding:

  padding-top: 24px;
  padding-bottom: 24px;
}

Vertical Align

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

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

.desk {
  text-align: center;
}

.plate,
.fork,
.knife {
  vertical-align: middle;
}

Flexbox

Для выравнивания тарелок, вилок и ножей мы можем использовать flexbox:

.desk {
  display: flex;
  justify-content: center;
  align-items: center;
}

блочный элемент

абсолютное позиционирование

Позиционируя элементы абсолютно, вы можете использовать CSStransformЦентрировать элемент по вертикали:

.plate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Если вы знаете высоту элемента, вы можете вместо этого использовать отрицательные поля.transform.

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}

CSS Grid

Используя CSS Grid, мы можем использоватьalign-itemsОтцентрируйте элемент перпендикулярно его области сетки.

.desk {
  display: grid;
  align-items: center;
}

Центрируется по горизонтали и вертикали

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

Отступы и выравнивание текста

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

другие типы элементов

абсолютное позиционирование

.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

Flexbox

пройти черезjustify-content:centerа такжеalign-items:centerЧтобы центрировать элемент по вертикали и горизонтали:

.plate {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Grid

пройти черезplace-itemsСвойство может в сочетание в сочетанииjustify-contentа такжеalign-items:

.desk {
  display: grid;
  place-items: center;
}

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Я sanddeed.com/article/ ааааа…

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории