По центру расположение html: Тег HTML выравнивание текста по центру

Leave a Comment / Html / By /

Шаблоны HTML по центру

Категории

Арт Дизайн

Технология

Бизнес Закон

Еда и ресторан

Архитектура и строительство

Мода и красота

Образование

промышленный

Интерьер

Автомобили и транспорт

Путешествия и отели

Музыка и развлечения

Спортивный

Распродажа

Медицина и наука

Природа

Недвижимость

Свадьба

Домашние животные и животные

портфолио

… Арт Дизайн Технология Бизнес Закон Еда и ресторан Архитектура и строительство Мода и красота Образование промышленный Интерьер Автомобили и транспорт Путешествия и отели Музыка и развлечения Спортивный Распродажа Медицина и наука Природа Недвижимость Свадьба Домашние животные и животные портфолио

Функции блокировки

Текст на изображении

Функции

Ползунок полной ширины

Контакты

О нас

Широкий

Формы

Расколоть

Над сеткой

Группа

Многослойные изображения

плитка

Галерея

Сетка

Блок перекрытия

Повторитель сетки

Слайдер

Трети

Модальное всплывающее окно

Сообщения в блоге

Список продуктов

информация о продукте

видео

Бренды

Отзывы

Прилавок

Форма обратной связи

Текст

Текст и кнопка

Команда

Цены

Стол

Вкладки

Аккордеон

часто задаваемые вопросы

Социальное

. .. Текст на изображении Функции Ползунок полной ширины Контакты О нас Широкий Формы Расколоть Над сеткой Группа Многослойные изображения плитка Галерея Сетка Блок перекрытия Повторитель сетки Слайдер Трети Модальное всплывающее окно Сообщения в блоге Список продуктов информация о продукте видео Бренды Отзывы Прилавок Форма обратной связи Текст Текст и кнопка Команда Цены Стол Вкладки Аккордеон часто задаваемые вопросы Социальное

Создание макета страницы по центру с помощью CSS

Создание макета страницы по центру с помощью CSS

Недавно читатель спросил, как создать макет страницы по центру с помощью CSS. Основная техника CSS относительно проста, но не очевидна. Вот что нужно, чтобы преобразовать этот старый резервный макет из таблицы на основе CSS.

Читатель недавно спросил, как создать
макет страницы по центру с помощью CSS. Эффект, который ищет читатель, аналогичен
к макету, полученному путем центрирования таблицы шириной 800 пикселей на странице
шириной 1024 пикселя. Это широко используемый макет страницы, который традиционно опирается на вложенные таблицы

для достижения эффекта, поэтому неудивительно, что читатель ищет способ воспроизвести эффект с помощью CSS.

Основная техника создания центрированного макета страницы
в CSS относительно проста, но не очевидна. Давайте посмотрим, что нужно
, чтобы преобразовать этот старый резерв из табличного макета в CSS.

Во-первых, для сравнения,
давайте рассмотрим пример макета страницы на основе центрированной таблицы. Следующий код
создает пример, показанный на рис. A .

  
 
 
 
  Cellspacing="10" 
 bgcolor="#FFFFFF"> 
      
         
Заголовок
 
      
      
          
Навигация
  
             
     
                     
  •  
     
    Позвольте мне не вступать в брак истинных умов
    •  
                   любовь не любовь 
                    
  • Что меняется, когда обнаруживается изменение
    •  
                 
 
          
         
Основное содержание -- Любовь не 
 дура времени...
 
          
      
      
         
 
             
Текст нижнего колонтитула -- Допустить препятствия...
 
     > 90 1d  
  
 
 

Тег

включает атрибуты
, которые определяют ширину как 80 процентов от ширины страницы и центрируют таблицу на странице
. Пустой абзац, предшествующий таблице, создает промежуток по вертикали между
вверху страницы и вверху таблицы. Еще один пустой абзац после
таблицы делает то же самое внизу страницы. Сама таблица содержит два столбца
и три строки ячеек. Ячейки в верхней и нижней строках объединяются 90 129 для создания панелей верхнего и нижнего колонтитула, а ячейки средней строки создают два столбца 90 129 — один для основного содержимого, а другой для боковой панели навигации.

Это очень простой пример метода
, который широко использовался в течение многих лет. В реальных приложениях основные 9Таблица 0129 обычно содержит другие вложенные таблицы для создания более сложного макета,
, но добавленная сложность не меняет основной метод.

Чтобы преобразовать этот традиционный табличный макет
в CSS, вы просто заменяете таблицу и ячейки таблицы элементами div. Один div
заменяет саму таблицу, а другие div заменяют отдельные ячейки таблицы, которые
определяют основные элементы макета, такие как верхний и нижний колонтитулы, боковую панель навигации и основное содержимое.

Каждый элемент div идентифицируется уникальным идентификатором, на который можно ссылаться с помощью селектора CSS для создания стиля, который применяется 9.0129 специально для div с этим идентификатором. Div, который заменяет таблицу, помечен
id=outer , а другие div идентифицированы
по их соответствующей функции.

Вот измененный код XHTML с разделами
вместо таблицы:

  
 
 
 
 
  
 заголовок 
 
 
 
 
 
 
 Навигация 
  
 
     
     
  •  к браку истинных умов
    •  
                 
  • Признать наличие препятствий; любовь не любовь
    •  
                 
  • Что меняется, когда находит изменение
    •  
             
 
     
 
     
 
         
Main Content -- Любовь не шутит со временем.. .
 
     
 
     
 
         
Текст нижнего колонтитула -- Допустить препятствия...
  
    

Обратите внимание, что все форматирование презентации
, ранее включенный в теги

и

, был удален. Пустые абзацы до и после таблицы
также исчезли. Стиль CSS будет обрабатывать все форматирование и интервалы.

Вот код CSS, который стилизует страницу
как центрированный макет, аналогичный приведенной выше странице на основе таблиц:

 body { 
     background-color: #999999; 
     размер шрифта:12 пикселей; 
     семейство шрифтов: Verdana, Arial, Helvetica, без засечек; 
} 
 div#outer { 
     ширина: 80%; 
     background-color:#FFFFFF; 
     margin-top: 50px; 
     margin-bottom: 50px; 
     левое поле: авто; 
     margin-right: auto; 
     padding: 0px; 
     граница: тонкая сплошная #000000; 
 
 } 
 div#header { 
     padding: 15px; 
     поле: 0 пикселей; 
     text-align: center; 
 } 
 div#nav { 
     ширина: 25%; 
     отступ: 10 пикселей; 
     margin-top: 1px; 
     с плавающей запятой: слева; 
 } 
 раздел # основной { 
     левое поле: 30 %; 
     margin-top: 1px; 
     отступ: 10 пикселей; 
 } 
 div#footer { 
     padding: 15px; 
     поле: 0 пикселей; 
     border-top: thin solid #000000; 
 }

На рис. B
показан результат — макет страницы по центру, выполненный с помощью CSS.

Форма корпуса не отличается от настольной конструкции
. Он просто устанавливает цвет фона, шрифт текста по умолчанию и размер
.

Стиль div#outer является ключом к этой технике. это
— это стиль для элемента div, создающего центрированное поле, которое служит контейнером для остального содержимого страницы.
— элемент div, заменяющий таблицу. Правило width: 80% устанавливает ширину div,
точно так же, как соответствующий атрибут тега таблицы устанавливает ширину таблицы.
Точно так же правило background-color:#FFFFFF создает белый фон для div, как
атрибут bgcolor=»#FFFFFF»
, который сделал для таблицы. margin-top: 50px
и margin-bottom: 50px правила заменяют
разделительные абзацы верхним и нижним полями для самого div.

Ключом к этой технике является правильное центрирование
внешнего деления . Проблема в том, что
нет align=»center» атрибута
для div, как для таблицы. Вы можете использовать text-align: center для родительского элемента div (в данном случае тега
), чтобы центрировать внешний разд. Тем не менее,
, хотя большинство браузеров будут использовать это выравнивание для элементов блочного уровня, таких как
div, в дополнение к тексту, возможно, это неправильное использование атрибута text-align, а
приводит к осложнениям, поскольку вы создаете дополнительные стили для сброса обычного текста. выравнивание
сзади налево.

Правильный способ отцентрировать блочный элемент с помощью CSS — установить
margin-left: auto и margin-right: auto . Это указывает браузеру
, чтобы автоматически вычислять равные поля для обеих сторон, тем самым центрируя div.
Граница : thin solid #000000 Правило добавляет
рамку вокруг внешнего блока div просто потому, что ее легко добавить с помощью CSS, но трудно
сделать с таблицами. Остальной код CSS стилизует элементы div для заголовка, нижнего колонтитула
, навигации и основного содержимого.

Стили div#header и div#footer задают поля и отступы для этих div. Кроме того, div#header
включает правило text-align: center для
center текста заголовка, а div#footer
включает правило border-top: thin solid #000000
для создания границы вдоль верхний край div, чтобы заменить горизонтальное правило
над нижним колонтитулом в табличном макете.

Стили div#nav и div#main
создают два столбца в середине центрированного поля. В div#nav , правило float: left сдвигает div влево от его родительского элемента
(внешний div), а правило width: 25%
устанавливает ширину div на 25 процентов от родительского элемента. Когда навигационный элемент перемещается на 90 129 влево и ограничивается заданной шириной, остается место для основного элемента, который может переместиться на 90 129 вверх вправо от навигационного элемента, таким образом создавая эффект двух столбцов. Стиль div#main включает правило margin-left: 30% для сохранения основного текста
выровнены в аккуратный столбец, а не растянуты ниже столбца навигации. Для левого поля основного блока
установлено значение, немного превышающее ширину блока навигации.
Я более подробно описываю технику создания столбцов с плавающими элементами в своей колонке
«Использование плавающих элементов CSS
для создания трехколоночного макета страницы».

Майклмидра

Опубликовано: Изменено: Увидеть больше Разработчик

Выбор редактора

  • Изображение: Rawpixel/Adobe Stock ТехРеспублика Премиум

    Редакционный календарь TechRepublic Premium: ИТ-политики, контрольные списки, наборы инструментов и исследования для загрузки

    Контент TechRepublic Premium поможет вам решить самые сложные проблемы с ИТ и дать толчок вашей карьере или новому проекту.

    Персонал TechRepublic

    Опубликовано: Изменено: Читать больше Узнать больше
  • Изображение: Nuthawut/Adobe Stock
  • Изображение: WhataWin/Adobe Stock Безопасность

    Основные угрозы кибербезопасности на 2023 год

    В следующем году киберпреступники будут как никогда заняты. Готовы ли ИТ-отделы?

    Мэри Шеклетт

    Опубликовано: Изменено: Читать больше Узнать больше Безопасность
  • Изображение: Разные фотографии/Adobe Stock Облако

    Salesforce дополняет свой технологический стек новыми интеграциями для Slack, Tableau

    Компания, которая в течение нескольких лет закупала лучшие в своем классе продукты, интегрирует платформы для создания синергии для скорости, понимания и совместной работы.

    Карл Гринберг

    Опубликовано: Изменено: