| Kosten | Понедельник, 19 Февраля 2018, 21:19 | Сообщение 1 |
| В этой статье рассмотрим, как можно центрировать элемент горизонтально внутри родительского элемента, чтобы у нас был элемент, размещенный на равном расстоянии от обеих сторон. Хороший способ подумать о вычислениях - это начать с ширины и высоты, которые вы хотите для своего элемента контейнера. И так, как пример, вы устанавливаете ширину и высоту содержащегося элемента в соответствии с шириной и высотой центрированного элемента и применяете рассчитанное дополнение.
Таким образом, чтобы получить контейнер шириной и высотой 200 пикселей с содержащимся центральным элементом ширины и высоты 50px, что просто дайте содержащему элементу ширину и высоту, где будет ровняться 50 пикселей. Как уже упоминалось, этот метод вероятно является наименее изящным из трех, что будут представлены здесь. И как знаете, если делать через CSS, то здесь блок лучше всего поддерживается в старых браузерах, не говоря о новых с обновлением.
Вот как выглядит код и результаты:
HTML
Код <div id="sakivtun" class="zornet_ru_gsan"> <div class="makogamus"></div> </div>
CSS
Код .zornet_ru_gsan {
margin: 53px auto;
background-color: #e2e2e2;
text-align: center;
border: 1px solid;
border-radius: 6px;
box-shadow: 0 1px 6px, 0 1px 2px 0px #949090;
}
.makogamus {
width: 50px;
height: 50px;
background-color: #d7faff;
border: 1px solid;
}
#sakivtun {
width: 50px;
height: 50px;
padding: 75px;
}
Вся цветовая палитра происходит в настройке стилей CSS. Это также касается самой формы и теней.
Демонстрация:
2. Преобразование
Этот метод основан на свойстве преобразования CSS3. Он дополнительно полагается на свойство position. Этот метод, как и первый метод не отличается большой элегантностью, однако вам не придется делать никаких дополнительных вычислений или жесткого кодирования значений, чтобы заставить его работать.
Идея с этим состоит в том, чтобы дать родительскому элементу позицию относительного, а затем с помощью позиционирования на дочернем элементе, чтобы установить его на 50% сверху и 50% слева от границ родитель. Поскольку элемент с центрированным элементом имеет размеры, нам нужно будет оттянуть его назад, чтобы он идеально расположился посередине.
HTML
Код <div id="sakivtun" class="zornet_ru_laguntuk"> <div class="gtulomesanta"></div> </div>
CSS
Код .zornet_ru_laguntuk {
margin: 64px auto;
width: 200px;
height: 200px;
background-color: #dedada;
text-align: center;
border: 1px solid;
border-radius: 6px;
box-shadow: 0 1px 12px 1px, 0 1px 12px #f5efef;
}
.gtulomesanta {
width: 50px;
height: 50px;
background-color: #e8ffe7;
border: 1px solid;
}
#sakivtun {
position: relative;
}
#sakivtun .gtulomesanta {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Демонстрация:
3. Flex
Этот последний метод прост и эффективен, поэтому на сегодняшний день это самый элегантный подход к рассмотрению 3. Этот метод использует flexbox. Flexbox - относительно новая концепция в мире CSS и таким образом имеет наименее браузер, что более старый браузер. Ниже приведена информация о поддержке браузера.
Использование flex для центрирования элемента в его контейнере действительно так же просто, как предоставление родительскому элементу отображаемого значения flex, а затем использование элементов выравнивания и свойство для центрирования дочернего элемента. И значения этих двух свойств тоже не могут быть проще, вы буквально просто набираете центр для каждого align-items делает вертикальное центрирование и обрабатывает горизонтальную ось.
Код и результаты выглядят следующим образом:
HTML
Код <div id="flex" class="kazerdumiglas"> <div class="gerizobersa"></div> </div>
CSS
Код .kazerdumiglas {
margin: 64px auto;
width: 200px;
height: 200px;
background-color: #d0c7c7;
text-align: center;
border: 1px solid;
border-radius: 6px;
box-shadow: 0px 3px 7px 0px, 0 1px 12px #eaeaea;
}
.gerizobersa {
width: 50px;
height: 50px;
background-color: #fffdfd;
border: 1px solid;
}
#flex {
display: flex;
align-items: center;
justify-content: center;
}
Демонстрация:
Итак, у вас есть 3 способа центрирования элементов с помощью CSS. Метод прокладки, вероятно, самый старый и наиболее поддерживаемый подход, но вам нужно будет сделать некоторые расчеты, чтобы он выглядел как можно лучше. Использование свойства transform основывается на совместимости с CSS3, но не требует специальных вычислений.
| | Страна: (RU) |
| |
