Учебник CSS
Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Самоучитель CSS
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Новости
Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости
Справочник CSS
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
- 25 апрель 2024, 01:19
| Помогли мы вам |
- 25 апрель 2024, 01:19
- 25 апрель 2024, 01:09
Как выровнять фотографию по центру веб-страницы - «Изображения»
| 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 не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.
- © Как выровнять текст по центру - «Текст»
- © text-align
- © Вертикальное выравнивание строчных элементов. - «Верстка»
- © Как сделать слой полупрозрачным? - «Вёрстка»
- © Как добавить рамку к изображению - «Изображения»
- © background-position
- © Как добавить картинку на веб-страницу? - «Изображения»
- © background-position-x
- © Как выровнять текст одновременно по правому и левому краю - «Текст»
- © background-position-y
|
|
|
|
АВТОРИЗАЦИЯ
|
• Мы информационный портал, на котором публикуются новости веб-дизайна и мелкие хитрости, а так же информация и советы которые вам смогут помочь по созданию сайтов, шаблонов, и многое другое. Вы также сможете найти интересные уроки по CSS3, HTML5, jQuery, Photoshop и и многое другое, интересное, с интернет мира. Вся информация размещенная на сайте предназначена исключительно в ознакомительных целях и ошибки в учении не кто не отменял .. Как говориться - "Не бойся, когда не знаешь: страшно, когда знать не хочется." «Самоучитель CSS » © Мы транслируем с 2006 года. Все для веб-дизайнера - CSS. Все материалы публикуют на сайте гости и пользователи сайта. Администрация сайта не несет ответственности за публикации. |
|