Как выровнять фотографию по центру веб-страницы - «Изображения» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 23 февраль 2025, 00:00
Астрономы наконец нашли источник таинственного радиосигнала, засечённого в 2013 году - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       005f1294
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
25-03-2016, 09:41
Как выровнять фотографию по центру веб-страницы - «Изображения»
Рейтинг:
Категория: Самоучитель CSS / Изображения
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 9.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Выровнять фотографию с подписью по центру горизонтали веб-страницы.

Решение

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

Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство text-align со значением center. При этом тег <thumb> должен располагаться внутри абзаца (тег <p>). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс fig, и все действия будем производить с ним. В примере 1 показано, как это сделать.

Пример 1. Использование text-align

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Выравнивание фотографии по центру</title>
  <style>
   .fig {
    text-align: center; /* Выравнивание по центру */ 
   }
  </style>
 </head>
 <body>
  <p>Текст до изображения</p>
  <p class="fig"><thumb src="images/photo1.jpg" 
   width="320" height="181" alt="Фотография"></p>
  <p>Текст после изображения</p>
 </body>
</html>

Результат данного примера продемонстрирован на рис. 1.

 


Рис. 1. Изображение, выровненное по центру веб-страницы

Также к фотографии можно добавить подрисуночную подпись. Текст должен располагаться сразу же после изображения и аналогично ему выравниваться по центру. Здесь всё просто, опять воспользуемся нашим классом, но уже применим его к тегу <figure>. Чтобы текст подписи отличался по своему виду от обычных абзацев, сделаем его курсивным и выделим другим цветом (пример 2).

Пример 2. Подрисуночная подпись

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фотография с подписью</title>
  <style>
   .fig {
    display: block; /* Блочный элемент (для старых браузеров) */
    text-align: center; /* Выравнивание по центру */
    font-style: italic; /* Курсивное начертание */
    margin-top: 0; /* Отступ сверху */
    margin-bottom: 5px; /* Отступ снизу */
    color: #666; /* Цвет подрисуночной подписи */
   }
  </style>
  <!--[if lt IE 9]>
   <script>
    document.createElement('figure');
    document.createElement('figcaption');
   </script>
  <![endif]-->
 </head>
 <body>
  <figure class="fig">
   <thumb src="images/photo2.jpg" width="320" height="179" 
   alt="Барельеф">
   <figcaption>
    Пещерный человек добывает огонь. 
    Но что это за лунная поверхность на заднем плане? Нет, не так все просто.
   </figcaption>
  </figure>
 </body>
</html>

Результат данного примера показан на рис. 2.

 


Рис. 2. Подпись под рисунком

Для блока с фотографией используется тег <figure>, а для подписи к нему тег <figcaption>. Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.


Internet Explorer Chrome Opera Safari Firefox Android iOS 6.0 1.0 9.0 1.0 1.0 1.0 1.0 Задача Выровнять фотографию с подписью по центру горизонтали веб-страницы. Решение Иллюстрации к тексту часто выравнивают по центру веб-страницы, при этом текст располагается до и после изображения. Такое расположение элементов позволяет разбить большой текст на смысловые блоки и привлечь внимание к рисункам. Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство text-align со значением center. При этом тег должен располагаться внутри абзаца (тег ). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс fig, и все действия будем производить с ним. В примере 1 показано, как это сделать. Пример 1. Использование text-align HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера продемонстрирован на рис. 1. Рис. 1. Изображение, выровненное по центру веб-страницы Также к фотографии можно добавить подрисуночную подпись. Текст должен располагаться сразу же после изображения и аналогично ему выравниваться по центру. Здесь всё просто, опять воспользуемся нашим классом, но уже применим его к тегу . Чтобы текст подписи отличался по своему виду от обычных абзацев, сделаем его курсивным и выделим другим цветом (пример 2). Пример 2. Подрисуночная подпись HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 2. Рис. 2. Подпись под рисунком Для блока с фотографией используется тег , а для подписи к нему тег . Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.
Просмотров: 2 952
Комментариев: 0:   25-03-2016, 09:41
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР