Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS Макет - Выравнивание



Выравнивание
горизонтально и вертикально


Выравнивание блока

Для выравнивания блока <div> по горизонтали по центру, нужно установить поле автоматически margin: auto;

Что бы предотвратить его от растягивания по краям, нужно установить ширину 50 процентов width: 50%;.

Элемент примет позицую до указанной ширины, а остальное пространство будет разделено отступами по 10 пикселей со всех сторон padding: 10px;:

Блок по центру в горизонтали.

.center {
   margin: auto;
   width: 50%;
   border: 3px solid green;
   padding: 10px;
}
Попробуйте сами »

Примечание: Выравнивание по центру не будет имеет никакого эффекта, если CSS свойство width не установлено (или установлено на 100 писелей).


Выравнивание текста

Простое выравнивание текста по центру внутри элемента, используется CSS свойство со значением text-align: center;

Текст по центру.

.center {
   text-align: center;
   border: 3px solid green;
}
Попробуйте сами »

Совет: Дополнительные примеры о том, как выровнять текст, см. главу CSS Текст.


Выравнивание изображения

Установить изображение по центру, нужно использовать автоматические поля margin: auto; и установить видимость блока display: block;:

Paris
img {
   display: block;
   margin: auto;
   width: 40%;
}
Попробуйте сами »


Выравнивание - используя position

Один из способов для выравнивания элементов является использование position: absolute;:

В мои молодые годы, мой отец дал мне совет, который раз, до сих пор, прокручивается в моей голове.

.right {
   position: absolute;
   right: 0px;
   width: 300px;
   border: 3px solid #73AD21;
   padding: 10px;
}
Попробуйте сами »

Примечание: Абсолютно позиционированные элементы удаляются из нормального потока, и они перекрываются другими элементами.


Выравнивание - используя float

Другой метод для выравнивания элементов заключается с использованием свойства float :

.right{
   float: right;
   width: 300px;
   border: 3px solid #73AD21;
   padding: 10px;
}
Попробуйте сами »

Оптимальное решение clearfix

Примечание: Если элемент выше элемента, содержащего его, и он находится в плавающем состоянии, он выйдет за пределы своего контейнера. Вы можете использовать "clearfix", чтобы исправить это (см. пример ниже).

Без Clearfix

С Clearfix

Затем мы можем добавить взлом clearfix к содержащему элементу, чтобы устранить эту проблему:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
Попробуйте сами »

Выравнивание - используя padding

Есть много способов в CSS, чтобы установить элемент по центру по вертикали. Простое решение состоит в использовании верхнего и нижнего отступов с помощью свойства padding:

Вертикальное выравнивание по центру.

.center {
   padding: 70px 0;
   border: 3px solid green;
}
Попробуйте сами »

Что бы выровнить по центру, как по вертикали, так и по горизонтали, нужно использовать CSS свойство padding и свойство со значением text-align: center:

Вертикально и горизонтально по центру.

.center {
   padding: 70px 0;
   border: 3px solid green;
   text-align: center;
}
Попробуйте сами »

Выравнивание - используя line-height

Есть еще одна хитрость, заключается в использовании CSS свойства line-height со значением height.

Вертикально и горизонтально по центру.

.center {
   line-height: 200px;
   height: 200px;
   border: 3px solid green;
   text-align: center;
}

/* Если текст содержит несколько строк, добавьте следующие: */
.center p {
   line-height: 1.5;
   display: inline-block;
   vertical-align: middle;
}
Попробуйте сами »

Выравнивание - используя transform

Если CSS свойство padding и line-height не вариант, третьим решением является использование выравнивания, свойство transform:

Вертикально и горизонтально по центру.

.center {
   height: 200px;
   position: relative;
   border: 3px solid green;
}

.center p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
Попробуйте сами »

Совет: Вы узнаете больше о трансформации собственности в главе 2D Трансформация.


Выравнивание - используя flex

Вы также можете использовать CSS свойство flex для центрирования объектов. Просто обратите внимание, что флексбокс не поддерживается в IE10 и более ранних версиях:

Я центрирован по вертикали и горизонтали.
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}
Попробуйте сами »

Совет: Вы узнаете больше о flex в главе CSS Флексбокс.


Практика: выравнивание

Упражнение: выравнивание div

Используйте свойство margin, чтобы убедиться, что элемент <div> выровнен по центру в соответствии с его родительским элементом.

<style>
.intro {
  width: 200px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor. </div> </body>



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.