| Kosten | Вторник, 31 Июля 2018 | Сообщение 1 |
| Горизонтальное центрирование при помощи стилистики CSS довольно легко. Это центрируемые элементы будут являться встроенным элементами, где используем центр выравнивания текста на его родителе. Когда элементы является на уровне блока, мы задаем оригинальную ширину, где устанавливаем стороны, как в левую и в правую сторону поля на значение auto.
С текста выровнять: центр ввиду, большинство людей смотрят сначала на вертикальный выровнять для того, чтобы центр вещи вертикально. Если вы пришли из макета на основе таблицы, вы, вероятно, использовали атрибут valign, который также приведет вас к мысли, что вертикальное выравнивание.
Однако валин работал только на столе клетки. Вертикальное выравнивание аналогично. Он также применяется к ячейкам таблицы и работает с некоторыми встроенными элементами.
Значения для вертикального выравнивания имеют значение относительно родительского встроенного элемента.
1. С помощью строки текста значения находятся относительно линии высоты.
2. В ячейке таблицы значений относительно высоты алгоритма, который обычно означает, что высота строки.
К сожалению, вертикальный выровнять не распространяется на блочные элементы, как абзац внутрь div, который является, где большинство из нас выяснить, что это не все решение для вертикального центрирования.
Все не потеряно, поскольку у нас есть другие методы для центрирования элементов уровня блока, и мы все еще можем использовать вертикальное выравнивание, где это необходимо. Какой метод вы выберете, будет зависеть от того, что вы пытаетесь центрировать относительно его элемента контейнера.
Метод высоты линии на элементе
Этот метод будет работать, когда вы хотите вертикально центрировать одну строку текста. Все, что нам нужно сделать, это установить высоту линии на элементе, содержащем текст больше, чем размер шрифта.
По умолчанию равное пространство будет задано выше и ниже текста, и поэтому текст будет сидеть в вертикальном центре.
Большинство учебников будет также задать высоту элемента с тем же значением данного в линии высоты. Я не думаю, что установка высоты необходима, но если только линия высота не работает для вас, установка высоты элемента, вероятно, будет решением.
HTML
Код <div id="parent"> <div id="child">Text here</div> </div>
CSS
Код #child {
line-height: 200px;
}
Вышеперечисленное работает во всех браузерах, однако оно будет работать только для одной строки текста. Если ваш текст может переноситься на 2-ю строку, вам нужно использовать другой метод. Значение 200px выше является произвольным. Вы можете использовать любое значение, если оно больше заданного размера шрифта.
Центрирование изображения по высоте линии
Что делать, если содержимое, которое вы хотите центрировать, это изображение?
Будет ли этот метод работать?
Ответ да, с одной дополнительной строкой css.
HTML
Код <div id="parent"> <img src="image.png" alt="" /> </div>
CSS
Код #parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
Вы устанавливаете высоту линии, как мы сделали выше (она должна быть больше, чем высота изображения), а затем установить вертикальное выравнивание: посередине на изображении.
Метод таблицы CSS
Выше я упомянул, что вертикальное выравнивание применяется к ячейкам таблицы, что приводит нас к этому методу. Мы будем отображать наши элементы в виде таблицы и ячейки таблицы, а затем использовать свойство вертикального выравнивания для центрирования содержимого.
Примечание: в CSS таблицах не совпадают с HTML таблицы.
HTML
Код <div id="parent"> <div id="child">Content here</div> </div>
CSS
Код #parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Мы устанавливаем родительский div для отображения в виде таблицы и дочерний div для отображения в виде таблицы ячейки. Затем мы можем использовать вертикальное выравнивание на дочернем div и установить его значение на middle. Все внутри этого ребенка div будет вертикально по центру.
В отличие от метода выше содержание может быть динамическим, как div будет расти с тем, что находится внутри. Недостатком этого метода является то, что он не работает в более старых версиях IE, хотя есть исправление, которое должно добавить display: inline-BL block к дочернему элементу.
CSS
Код #child {
display: inline-block;
}
Позиционирование и отрицательная маржа
Этот метод работает для элементов уровня блока, а также работает во всех браузерах. Это требует, чтобы мы установили высоту элемента, который мы хотим центрировать. В приведенном ниже коде я центрирую ребенка как по вертикали, так и по горизонтали, используя этот метод.
HTML
Код <div id="parent"> <div id="child">Content here</div> </div>
CSS
Код #parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Затем мы устанавливаем верхнее и левое значения ребенка, чтобы быть 50% каждый, который будет центром родителя. Однако это устанавливает верхний левый угол, чтобы быть в центре, поэтому мы не закончили.
В отличие от первых 2 методов, он предназначен для элементов уровня блока. Он работает во всех браузерах, однако содержимое может перерасти свой контейнер, и в этом случае он исчезнет визуально. Оно будет работать наиболее хорошо, когда вы знаете высоты и ширины элементов.
Абсолютные располагать и протягивать
Как и в случае с вышеприведенным методом, он начинается с установки позиционирования на родительских и дочерних элементах как относительных и абсолютных соответственно. Оттуда вещи отличаются.
В приведенном ниже коде я еще раз использовал этот метод для центрирования ребенка как по горизонтали, так и по вертикали, хотя вы можете использовать этот метод только для вертикального центрирования.
HTML
Код <div id="parent"> <div id="child">Content here</div> </div>
CSS
Код #parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
Идея этого метода состоит в том, чтобы попытаться получить дочерний элемент, чтобы растянуть все 4 ребра, установив верхний, нижний, правый и левый валы на 0. Поскольку наш дочерний элемент меньше, чем наши родительские элементы, он не может достичь всех 4 ребер.
Однако установка auto в качестве поля на всех 4-х сторонах приводит к тому, что противоположные поля будут равны, и отображает наш дочерний div в центре родительского div.
К сожалению, выше не будет работать в IE7 и ниже, и как предыдущий метод содержание внутри ребенка div может вырасти слишком большим, заставляя его быть скрытым.
Верхняя и нижняя обивка
В методе выше мы позволили браузеру автоматически установить поля дочернего элемента, чтобы они были равны. В этом методе мы сделаем что-то подобное и явно установить верхнюю и нижнюю обивка родителя, чтобы быть равным.
HTML
Код <div id="parent"> <div id="child">Content here</div> </div>
CSS
Код #parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
В CSS выше я установил верхние и нижние прокладки на обоих элементах. Установка его на дочернем элементе гарантирует, что содержимое в дочернем элементе будет вертикально центрировано, а установка на родительском элементе гарантирует, что весь дочерний элемент центрирован внутри родительского элемента.
Я использую относительные измерения, чтобы каждый div, чтобы расти динамически. Если один из элементов или его содержание должно быть установлено с абсолютным измерением, то вы должны будете сделать некоторые математику, чтобы убедиться, что все сложить.
Например, если родитель был 400px в высоте и дочерний 100px в высоте, нам нужно 150px заполнения на верхней и нижней.
150 + 150 + 100 = 400
Использование % может сбросить вещи в этом случае, если наши значения % не соответствуют точно 150px.
Этот метод работает в любом месте. Недостатком является то, что в зависимости от специфики вашего проекта вам может потребоваться немного по математике. Однако если вы падаете в соответствии с идеей разработки гибких макетов, где ваши измерения все относительно можно избежать математики.
Примечание: этот метод работает путем установки прокладок на наружных элементов. Вы можете перевернуть вещи и вместо этого установить равные поля для внутренних элементов. Я склонен использовать заполнение, но я также успешно использовал поля. То, что вы выберете, будет зависеть от специфики вашего проекта.
Floater Div
Этот последний метод требует пустой div, который плавал и используется для контроля, где наш дочерний элемент сидит в документооборот. Обратите внимание, что floater div приходит до нашего ребенка div в html ниже.
HTML
Код <div id="parent"> <div id="floater"></div> <div id="child">Content here</div> </div>
CSS
Код #parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}
Мы плаваем пустой div влево или вправо,где даем ему высоту 50% родительского div. Это заставляет его заполнять всю верхнюю половину родительского элемента.
Поскольку этот div платается, он удаляется из обычного потока документов, поэтому нам нужно очистить дочерний элемент. Здесь я использовал clear: both, но вам просто нужно очистить в том же направлении. Вы плавали. Пустой floater div.
Верхний край ребенка div теперь должен быть непосредственно ниже нижнего края поплавка div. Нам нужно поднять дочерний элемент на величину, равную половине его высоты, и для этого мы устанавливаем отрицательный запасно на поплавке div.
Этот метод также работает во всех браузерах. Недостатком является то, что он требует пустой div и что вы знаете высоту дочернего элемента.
Дополнительные ресурсы
В разделах выше я ссылался на статьи, относящиеся к каждому методу. Ниже приведены некоторые ресурсы, которые охватывают более одного метода центрирования.
- Вертикальное центрирование с помощью CSS — охватывает все перечисленные способы, за исключением под клада способ
- Два простых способа, чтобы выровнять по вертикали с помощью CSS — охватывает абсолютное позиционирование и отрицательные отступы и линии высоты методы
- Вертикальное центрирование с помощью CSS — охватывает все методы, за исключением плавающий див метод и добавляет еще несколько.
- В CSS тесты и эксперименты — содержит различные УСБ экспериментов. Найдите на странице слово vertical, и вы найдете несколько экспериментов по вертикальному центрированию, включая 2 ссылки ниже.
- Центрирование (по горизонтали и вертикали) изображения в коробке
- Shrink-wrap и Центр
Краткие сведения
Ни один из методов выше не является сложным, и я уверен, что если вы используете каждый раз или дважды это будет легко использовать снова.
Некоторые методы лучше работают для встроенных элементов, а другие лучше работают для элементов уровня блока. Некоторые могут работать лучше с вашими предпочтениями для разработки макета, а некоторые не работают в более старых версиях определенного браузера, который мы все хорошо знаем.
Редко я вертикально центрирую элементы в дизайне. Когда я делаю методы, которые я склонен использовать, это метод высоты линии и метод равного заполнения. Один или другой всегда работал для моих нужд. В то время мы сможем использовать технологии CSS3 гибкая коробка макет модуль и забываем о методах выше, но теперь браузер поддерживает не совсем там.
| | Страна: (RU) |
| |
