Как выровнять DIV по горизонтали в CSS

Содержание

• направления
• Определите абсолютные позиции тегов div
• box1 {margin-left: 100px; }
• box2 {margin-left: 400px; }
• box3 {margin-left: 700px; }
• Float элементы DIV
• чаевые
• предупреждение
• Что вам нужно

HTML-теги "div" определяют макет веб-страниц. Каскадные таблицы стилей используются для оформления HTML-тегов на страницах. Свойства "id" и "class" используются в CSS для применения определенных стилей. Эти стили, общие для нескольких тегов "div", могут быть определены в "классе", но уникальные стили должны быть определены с помощью свойства "id" конкретного тега "div", так как это свойство может использоваться только один раз. Соседний элемент div будет отображаться под предыдущим элементом div, если только не применяется горизонтальный выравнивающий стиль.

направления

HTML-теги "div" исключают необходимость использования таблиц для разметки страницы (Comstock / Comstock / Getty Images)

Определите абсолютные позиции тегов div

1. Откройте страницу HTML и связанный файл CSS в двух разных окнах из HTML или обычного текстового редактора, такого как Блокнот.

2. Найдите все теги div, которые будут выровнены, и создайте уникальный класс "halign":

   Первый див

   Второй див третий див

   Если "halign" уже использовался в качестве имени класса в другом месте HTML, используйте другой и убедитесь, что он уникален.

3. Дайте имена "id" всем элементам "div", которые должны быть выровнены. Включите числа в имена, чтобы определить порядок размещения. Например, используйте имена «box1», «box2» и так далее:

   
   
   Первый див

   Второй див третий див

   Обратите внимание на имена «id», которые уже были использованы.

4. Откройте файл CSS и введите следующее:

   .halign {позиция: абсолютная; верх: XXX; }

   Замените «XXX» значением поля между абсолютной вершиной и горизонтальной линией выравнивания. Используйте значения пикселей или проценты, в зависимости от других элементов div, которые расположены над классом «halign».

5. Отредактируйте отдельные блоки стиля "div" в CSS. Найдите в коде имена «id» и добавьте строку кода «left: YYY» внутри каждого блока, заменив «YYY» абсолютными значениями левого поля элементов. «Абсолютное поле» - это расстояние между краем экрана браузера и соответствующим div. У полей будут большие значения, чтобы поместить элементы div рядом друг с другом:

   box1 {margin-left: 100px; }

   box2 {margin-left: 400px; }

   box3 {margin-left: 700px; }

Float элементы DIV

1. Откройте файл CSS в текстовом редакторе.

   
   

2. Определите уникальное имя "class", например "halign", введите "float: left;" в блоке кода и сохраните файл.

3. Откройте HTML в новом окне текстового редактора и убедитесь, что все элементы, которые должны быть выровнены, являются смежными.

4. Соедините имя класса "halign" с соседними элементами "div", которые необходимо выровнять.

5. Поместите следующий код поверх группы элементов "div" в HTML:

чаевые

• Если какие-либо имена классов использовались в любом из рассматриваемых элементов, введите дополнительные имена классов и разделите их пробелом. Используйте проценты для значений полей и пробелов, если веб-страница имеет плавную ширину, чтобы размеры блоков и границ изменялись автоматически в зависимости от размера и разрешения экрана. Элементы дизайна на веб-страницах с фиксированной шириной не могут быть адаптированы к размеру или разрешению экрана, а значения пикселей соответствуют полям.

предупреждение

• Некоторые CSS-коды создают уникальное поведение в разных браузерах. Проверьте совместимость всего CSS и HTML кода. Отсутствие тестирования может снизить доступность и удобство использования веб-страницы.

Что вам нужно

• Текстовый редактор