|
Как легко центрировать изображение в CSS
|
|
| Kosten | Вторник, 26 Декабря 2017 | Сообщение 1 |
| Иногда нам нужно поставить картинку или элемент по центру, что здесь рассмотрим как это можно сделать с помощью CSS, задав ему размеры. Если вы изучаете, как создавать веб сайты, одним из наиболее распространенных трюков, которые вам нужно освоить, является, то как центрировать элементы в окне браузера. Это может означать центрирование изображения на странице, или это может быть выравнивание по центру текста, такого как заголовки, как часть дизайна.
Правильный способ выполнения этого визуального отображения центрированных изображений или текста или даже всей страницы, это использование каскадных таблиц стилей CSS.
Центрирование с помощью CSS может стать проблемой для начинающих веб дизайнеров, потому что существует так много разных способов достижения этого визуального стиля. Хотя различные методы могут быть приятными или опытными разработчиками, которые знают, что не все методы работают над каждым элементом, это может быть ужасно сложным для новых профессионалов, поскольку самые разные методы означают, что им нужно знать когда использовать какой подход. Самое лучшее, что нужно сделать это получить представление о нескольких подходах. Когда вы начнете их использовать, вы узнаете какой метод лучше всего работает в этих случаях.
На высоком уровне вы можете использовать CSS для:
1. Текст центра;
2. Центрируйте элемент уровня блока (например, разделение);
3. Центрировать изображение;
4. Вертикально центрировать блок или изображение;
Центр и изображение в CSS горизонтально
Изображения те же, что и div вы можете использовать text-align в свой родительский элемент, но не по краю: 0 auto только на изображении.
Чтобы центрировать изображение в div, установите ширину div, затем добавьте margin: 0 auto и display: блок в изображение в CSS.
HTML:
Код <div class=wrapper> <img src="http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png" /> </div>
Стили CSS:
Код .wrapper{
width: 100%;
height: 300px;
border: 2px solid #93c504;
}
img{
max-width: 250px;
display: block;
margin: 0 auto
}
Это приведет к выравниванию изображения по горизонтали:
Удостоверьтесь, что у вас меньшая ширина изображения, чем у родительского элемента.
Первое значение маржи 0 было для верхнего и нижнего полей.
Второй для левого и правого полей.
Вы также можете установить margin-left: auto и margin-right: auto на изображении в CSS.
Центрировать изображение в CSS по горизонтали и вертикали
Мы будем использовать элемент span, чтобы направить наше изображение, сделав его центром. Настройка изображения с маркой и выравниванием текста не могла привести к выравниванию нашего центра изображения.
HTML:
Код <div class=wrapper> <span class="for-image"></span> <img src="http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png" /> </div>
Стили CSS:
Код .wrapper {
width: 100%;
height: 300px;
border: 2px solid #93c504;
text-align: center
}
.for-image {
height: 100%;
display: inline-block;
vertical-align: middle
}
img {
max-width: 200px;
height: auto;
background: #3A6F9A;
vertical-align: middle
}
Отзывчивые дизайнерские образы
Создание отзывчивого дизайнерского изображения очень полезно для мобильных устройств.
Отзывчивое изображение автоматически уменьшает масштаб и регулирует ширину устройства. Чтобы создать отзывчивое дизайнерское изображение, вы просто устанавливаете максимальную ширину: 100%; и высота: авто; в изображения.
Макс-ширина: 100%; означает, что ширина изображения будет охватывать всю ширину его родителя. Вы также можете установить естественную ширину изображения (полно размерную ширину изображения) в свойство max-width, чтобы он не основывался на ширине его родительского элемента.
| | Страна: (RU) |
| |
| Kosten | Четверг, 28 Июня 2018 | Сообщение 2 |
|
| Когда-то на протяжении всей нашей карьеры кодирования мы все были расстроены центрированием вещей в CSS, где поиск того, как центрировать div внутри div в Google или переполнение стека.
Это может быть одна из самых простых задач, которая может быть выполнена, но может быстро запутаться, поскольку вы добавляете на свою страницу дополнительные элементы и стили.
Поскольку это довольно распространенная проблема, этот список способен центрировать CSS в руководстве. Также включил вставки или ссылки с каждым примером, который можно посмотреть а CodePen.
Как центрировать со стилем в CSS
HTML
Код <h3>Метод выравнивания текста</h3> <div class="developers-cidentally"> <div class="pushed"></div> </div> <h3>Маржинальный метод</h3> <div class="next-generation"></div> <h3>Метод абсолютного позиционирования</h3> <div class="developers"></div>
CSS
Код h3 {
text-align: center;
}
.developers-cidentally {
text-align: center;
}
.pushed {
background-color: #14655c;
width: 100px;
height: 100px;
display: inline-block;
border-radius: 63px;
border: 3px solid #69c3ba;
}
.next-generation {
background-color: #24961a;
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 81px;
border: 3px solid #bad2b9;
}
.developers {
background-color: #185177;
width: 100px;
height: 100px;
position: absolute;
left: 49%;
margin-left: -49px;
border-radius: 75px;
border: 3px solid #7ccbff;
}
Метод выравнивания текста
Метод text-align: center пожалуй наиболее распространенный, который вы увидите для центрирования. Он используется в основном для центрирования текста на вашей HTML странице, но его можно использовать и для центрирования div.
Трюк здесь заключается в следующем:
1. Включите div, который вы хотите центрировать, с родительским элементом, где обычно называемым оберткой или контейнером;
2. Установите text-align: center в родительский элемент;
3. Затем установите внутренний div на display: inline-block;
В моем примере с синим квадратом я прилагаю его к другому div, называемому developers-cidentally. Чтобы центрировать квадрат, топришлось создать родительский элемент и установить свойство отображения моего синего квадрата на встроенный блок.
Это связано с тем, что по умолчанию свойство отображения div имеет значение block, то есть оно будет охватывать всю ширину страницы. Установив свойство отображения моего синего квадрата на встроенный блок, мы гарантируем, что синий квадрат будет охватывать только ширину, которую я установил, что составляет 100 пикселей.
Добавление нескольких дочерних элементов в родительский элемент, будет все центрировать.
| | Страна: (RU) |
| |
| Kosten | Четверг, 28 Июня 2018 | Сообщение 3 |
|
| Другим распространенным способом центрирования является использование автоматического метода margin. Используя этот метод, нам не нужен родительский элемент. Мы можем просто применить margin: 0 auto к нашему кругу, если у нас есть определенная ширина. Margin: 0 auto - это сокращение для установки верхнего и нижнего полей на ноль, а левое и правое поля на авто.
Это важно, потому что без ширины 100 пикселей, которую я определил, браузер не сможет отображать левый и правый поля, необходимые для центрирования желтого окна. Установив ширину, браузер автоматически распределит правильное количество полей по обе стороны от желтой рамки.
Еще один классный трюк - это просто установить маржу слева или авто или поле справа на авто, что позволяет нам подтолкнуть наш div либо к правой, либо к левой стороне страницы, соответственно.
HTML
Код <div class="mechanical-gamepad"></div>
CSS
Код .mechanical-gamepad {
background-color: #367fff;
width: 175px;
height: 175px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 85px;
border: 3px solid #c4d5f3;
}
Демонстрация
Метод абсолютного позиционирования
Абсолютное позиционирование элемента позволяет нам по существу размещать элемент везде, где мы хотим его на странице ... с одним недостатком.
Абсолютное позиционирование удаляет элемент из потока страницы.
Это важно, потому что это может привести к перекрытию элементов при неправильном использовании. Если мы хотим просто центрировать элемент горизонтально на странице, как мы делали в первых двух методах, мы должны помнить о трех шагах:
1. Установите свойство позиции элемента в абсолютное;
2. Применить left: 50% к элементу;
3. Установите левый край от половины ширины элемента;
В этом примере мы используем круга, это то тот же размер, что и другие примеры, поэтому наша ширина по-прежнему составляет 100 пикселей.
Как вы можете видеть, что абсолютная позиция и применено left: 50% к площади. Это говорит браузеру переместить левый край на 50% вправо.
Но если вы воссоздаете этот пример, где хотим, чтобы левый край находился посередине, мы хотим, чтобы середина квадрата совпала с серединой страницы.
Чтобы выровнять вещи и компенсировать лишнее пространство, мы применяем край слева от половины ширины зеленого квадрата. В нашем случае это 50px, независимо от ширины элемента, он всегда будет наполовину.
| | Страна: (RU) |
| |
| Kosten | Четверг, 28 Июня 2018 | Сообщение 4 |
|
| До сих пор мы занимались только центрированием вещей по горизонтали, но что, если мы хотим что-то встать посреди страницы. Давайте сосредоточим наш красный квадрат как по горизонтали, так и по вертикали. Хотя этот метод также использует абсолютное позиционирование и left: 50%, где также применялись еще два свойства к элементу.
Установив верхнее свойство на 50%, я предлагаю браузеру выровнять верхний край нашего красного квадрата с серединой страницы по вертикали. Но, как и в предыдущем примере, мы не хотим, чтобы края были выстроены в центр с центром, мы хотим, чтобы центр нашего квадрата располагался прямо над центром нашей страницы.
Метод преобразования или перевода
Здесь мы применяем новое свойство, называемое преобразованием.
Есть много интересных вещей, которые вы можете сделать с преобразованием, например, для перевода, поворота и масштабирования анимации, но для этого примера мы будем использовать перевод.
Мы даем свойство преобразования transform: translate -50%, -50% и voila.
Наш квадрат центрирован как по горизонтали, так и по вертикали.
По мне отличный метод, потому что независимо от ширины или высоты нашего элемента он всегда будет в центре страницы. Этот метод часто используется в гибкой конструкции и не требует определения полей, например, в методе абсолютного позиционирования.
HTML
Код <div class="developers_accidentally_pushed"> <div class="arvested_partial"></div> </div>
CSS
Код .developers_accidentally_pushed {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.arvested_partial {
background-color: #6526bd;
width: 85px;
height: 85px;
border-radius: 63px;
border: 3px solid #ab72fb;
}
Демонстрация
Метод позиционирования элементов Flexbox
Если вы не знакомы с Flexbox, все в порядке, так как Flexbox, это модуль компоновки, который обеспечивает более эффективный способ выравнивания и размещения элементов на странице. Если вы заинтересованы в обучении Flexbox, то Flexbox Froggy - это потрясающий и интересный способ обучения, где не связанный, конечно же, - это то, что я использовал для обучения.
Четыре этапа центрирования по горизонтали и вертикали с помощью Flexbox заключаются в следующем:
1. Контент HTML, body и parent должен иметь высоту 100%;
2. Настроить отображение на родительский контейнер;
3. Установите элементы выравнивания в центр на родительском контейнере:
4. Установить выравнивание-содержание в центр на родительском контейнере;
Настройка отображения на гибкий путь для родителя определяет его как гибкий контейнер. Установив выравнивание элементов в центр, мы говорим, что дети или элементы гибкости должны быть центрированы по вертикали внутри родителя.
| | Страна: (RU) |
| |
