| Kosten | Понедельник, 22 Апреля 2019 | Сообщение 1 |
| В какой-то момент у вас может возникнуть ситуация, когда вы хотите центрировать несколько элементов или другие блочные элементы на одной строке в области фиксированной ширины. Центрирование одного элемента в фиксированной области легко. Просто добавьте margin:auto и фиксированную ширину к элементу, который вы хотите центрировать, и поля заставят элемент центрироваться.
Там действительно должен быть подобный простой способ для центрирования нескольких элементов равномерно распределенных. Было бы неплохо, если бы у CSS было свойство «box-align», которое можно было бы установить как «center», тогда дочерние элементы были бы равномерно центрированы в пределах их родителя.
Что же, вы можете достичь чего-то похожего, используя гибкость CSS с перекомпоновкой элементов.
HTML
Код <div style="width: 615px; margin: 0pt auto;"> <h1 style="text-align: center;">Демонстрация по центру нескольких Div</h1> <div id="parent"> <div class="child"> <p>Это первое поле с текстом.</p> </div> <div class="child"> <p>Это еще одна коробка</p> </div> <div class="child"> <p>Это коробка</p> </div> <div class="child"> <p>Это коробка</p> </div> </div>
Дочерние блоки выше центрированы внутри их родителей и распространены равномерно используя "display: inline-block "вместе с некоторыми типографский CSS для контроля пустого пространства.
Демонстрация
Обычный путь
Как правило, в такой ситуации вы просто плаваете по ячейкам, а затем добавляете левые и правые поля, чтобы расставить их соответствующим образом. Но это может немного запутать, потому что IE6 не любит поля на поплавках, и вам всегда нужно иметь другой идентификатор или класс для элементов, для которых вы не хотите поля, как например, это последний или первый.
Вы можете обойти проблему IE6, добавив display: inline в объявлении только для IE6, но ваш код все равно будет несколько запутанным из-за дополнительного кода, который заставит себя вести первый или последний элемент. Кроме того, последний блок может упасть на следующую строку в IE.
Есть и другое решение, которое может работать лучше при определенных обстоятельствах.
Используйте inline-block и управляйте пробелами
Для достижения того же эффекта, что и при добавлении чисел с плавающей точкой и полей, вы можете просто «перераспределить» свои элементы уровня блока как встроенные блоки, а затем манипулировать пустым пространством между ними.
Вот как может выглядеть CSS:
Код #parent {
width: 615px;
border: solid 1px #aaa;
text-align: center;
font-size: 20px;
letter-spacing: 35px;
white-space: nowrap;
line-height: 12px;
overflow: hidden;
}
.child {
width: 100px;
height: 100px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: middle;
}
В примере выше предлагается, что есть четыре дочерних блока, каждый с классом child, и каждый 100 пикселей на 100 пикселей. Коробки, естественно, являются элементами блочного уровня, но CSS меняет их на inline-block, что позволяет им естественным образом течь с текстом и пробелами. Поскольку нет текста в родительском контейнере, контроль над текстом и пробелами не будет проблемой.
Родительский элемент с идентификатором parent в этом примере имеет четыре ключевых свойства текста:
- text-align делает все встроенные дочерние элементы центрированными.
- letter-spacing контролирует размер каждого пустого пространства между ячейками.
- white-space: nowrap удерживает последний элемент от возможного сброса на следующую строку.
- overflow: hidden предотвращает растяжение коробки в IE6.
- vertical-align: middle сохраняет поля на одной вертикальной плоскости друг с другом при добавлении контента.
Internet Explorer
Каким было бы решение CSS без проблемы Internet Explorer, чтобы обойти? Хотя этот метод работает одинаково в каждом браузере (включая IE8), IE6 и IE7 не взаимодействуют, потому что они не полностью поддерживают inline-block.
Чтобы эти браузеры показывали практически одинаковый результат, вам нужно добавить следующий CSS:
Код .child {
*display: inline;
*margin: 0 20px 0 20px;
}
Вышеприведенный CSS должен применяться только к IE6 и IE7, и он должен появляться после другого CSS. Поля, добавленные здесь, помогают нам получить тот же визуальный результат, а новое displa yсвойство использует ошибку в тех браузерах, которая заставляет блочный элемент работать как его встроенный, когда вы объявляете, display:inline-block после чего следует display:inline.
Недостатки
Вам просто нужно убедиться, что применяемые параметры пробела и текста сброшены для любых дочерних элементов внутри блоков. Таким образом, хотя это может работать, когда у вас есть прямые изображения или другой нетекстовый контент, это может быть больше проблем, если ваши коробки полностью загружены разнообразным контентом.
Тем не менее это хороший способ узнать, когда нужно центрировать некоторые элементы блока с равным интервалом, и вы не хотите применять дополнительные классы к конечным единицам. И эта техника будет еще более важной, когда старые версии IE исчезнут из общего пользования.
| | Страна: (RU) |
| |
| Kosten | Понедельник, 22 Апреля 2019 | Сообщение 2 |
|
| Как центрировать несколько элементов div внутри контейнера в CSS
Вы можете применить стиль text-align:center; к своему контейнеру и отобразить .blocks в виде элементов inline-block:
HTML
Код <div class="container"> <div class="block">1. Название материала</div> <div class="block">2. Название материала</div> <div class="block">3. Название материала</div> <div class="block">4. Название материала</div> <div class="block">5. Название материала</div> <div class="block">6. Название материала</div> <div class="block">7. Название материала</div> <div class="block">8. Название материала</div> </div>
CSS
Код .container {
width: 70%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.block {
background: green;
height: 100px;
width: 100px;
display:inline-block;
margin: 10px;
}
Демонстрация
| | Страна: (RU) |
| |
