• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Метод CSS по центрированию div элементов (Полное описание по центрированию DIV-элемента с помощью CSS)
Метод CSS по центрированию div элементов
Kosten
Дата: Вторник, 2020-06-16, 23:27 | Сообщение 1
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


Если рассматривать вообщем, то существует несколько вариантов решения проблемы. Здесь также приводится сводная информация, основанная на часто используемом требовании. Ниже приведен список из методов, которые могут центрировать по горизонтали и вертикали. Разнообразное мышление, не будьте слишком твердыми, улучшайте свою способность гибко решать проблемы, проблема очень проста, это достижение эффекта.

1. Способ центрирования коробки по вертикали

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

HTML

Код
<div class="father">   
        <div class="son"></div>
</div>


CSS
Код
/ * Перемещение по атрибуту преобразования * /
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid #000;
            margin-top: 50%;// Переместить вниз на половину родительского поля
            transform: translateY(-50%);// Переместить половину поля вверх
        }

            / * Переместить позиционированием * /
           .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            border: 1px solid #000;
            margin: 0 auto;
            position: relative;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid #000;
            position: absolute;
            top: 50%;// первое перемещение вниз на половину родительского поля
            margin-top: -100px;// Переместиться вверх на половину коробки

        }

Терерь переходим на второе решение.

2. Используйте свойство vertical-align: middle таблицы, чтобы добиться вертикального центрирования поля.

Код
.father {
             width : 500px ;
             height : 500px ;
             background-color : skyblue ;
             border : 1px solid # 000 ;
             display : table-cell ; // Формат отображения - таблица
             вертикальное-выравнивание : среднее ; / / Содержимое внутри выровнено по центру
         }
         .son {
             width : 200px;
             высота : 200px ;
             цвет фона : розовый ;
             рамка : 1px solid # 000 ;
         }

На этом процесс завершен!

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

Код
.father {
             ширина : 500px ;
             высота : 500px ;
             цвет фона : Skyblue ;
             границы : 1px твердое # 000 ;
             Запас : 50px авто ;

         }
         .son {
             ширина : 200px ;
             высота : 200px ;
            background-color : pink ;
             border : 1px solid # 000 ;
             margin-top : 149px ; // Укажите margin-top в соответствии с высотой родительского блока
         }

На этом завершено!

Метод центрирования коробки по горизонтали

1. Используйте поле: 0 авто;

Код
.father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            border: 1px solid #000;
            margin: 50px auto;

        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid #000;
            margin: 0 auto;// Позволяет блоку автоматически адаптироваться влево и вправо, хочет быть слева: auto; вправо: auto
left:auto; right:auto
        }

Далее:

2. Осуществить центрирование, рассчитав левый и правый поля

Код
.father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            border: 1px solid #000;
            margin: 50px auto;

        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid #000;
            margin-left: 149px;// Для фиксированной ширины родительского поля укажите margin-left
        }

Здесь завещаем и переходим далее.

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

Код
/ * Реализация с помощью преобразования * /
.father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            border: 1px solid #000;
            margin: 50px auto;

        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid #000;
            margin-left: 50%;// первое перемещение половины родительского блока
            transform: translateX(-50%);// затем перемещаемся самостоятельно Половина из коробки

        }

/ * достигается за счет позиционирования * /
.father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;

        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid #000;
            position: absolute;
            left: 50%;// переместить половину родительского блока вправо
            margin-left: -100px;// переместить половину поля влево
            /* transform: translateX(-50%);// Переместить поле наполовину
}

Смотрим дальше.

4. Превратите блок во встроенный блок, а затем используйте атрибут выравнивания текста, чтобы центрировать блок по горизонтали.

Код
.father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            border: 1px solid #000;
            margin: 50px auto;
            text-align: center;// Сделать родительский блок горизонтально центрированным

        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px solid #000;
            display: inline-block;// сделать так, чтобы дочерний блок отображался как режим встроенного блока
        }

Это статья показала вам, как использовать CSS для центрирования поля, где существует определенная справочная ценность.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Метод CSS по центрированию div элементов (Полное описание по центрированию DIV-элемента с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: