CSS текст по центру
Задача
Выровнять фотографию с подписью по центру горизонтали веб-страницы.
Решение
Иллюстрации к тексту часто выравнивают по центру веб-страницы, при этом текст располагается до и после изображения. Такое расположение элементов позволяет разбить большой текст на смысловые блоки и привлечь внимание к рисункам.
Вначале рассмотрим выравнивание изображения по центру. Для этого к селектору P следует добавить стилевое свойство text-align со значением center. При этом тег <img> должен располагаться внутри абзаца (тег <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"><img 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"> <img src="images/photo2.jpg" width="320" height="179" alt="Барельеф"> <figcaption> Пещерный человек добывает огонь. Но что это за лунная поверхность на заднем плане? Нет, не так все просто. </figcaption> </figure> </body> </html>Результат данного примера показан на рис. 2.
Рис. 2. Подпись под рисунком
Для блока с фотографией используется тег <figure>, а для подписи к нему тег <figcaption>. Старые версии IE не понимают эти теги, поэтому специально для них добавляется небольшой скрипт.
htmlbook.ru
Применения CSS для центрирования в HTML
Центрирование с помощью CSS может стать проблемой для начинающих веб-дизайнеров. Существует много способов сделать это, но не все они применимы к каждому элементу.
CSS можно использовать, чтобы:
- Центрировать текст;
- Центрировать блочный элемент (например, div);
- Центрировать изображение;
- Вертикально центрировать блок или изображение.
Много лет назад веб-дизайнеры могли использовать <center> для центрирования изображений и текста. Но теперь этот тег признан устаревшим и больше не поддерживается современными браузерами. Это вызвано тем, что современные сайты должны иметь четкое разделение структуры и стилей.
Советы по центрированию с помощью CSS
HTML используется для создания структуры, а CSS определяет стили. Так как центрирование – это визуальная характеристика, то оно осуществляется с помощью каскадных стилей.
Центрирование текста с CSS
Проще всего центрировать текст на веб-странице. Чтобы это сделать, нужно всего одно свойство: HTML text align:
С помощью этой строки кода каждый параграф с классом center будет центрирован горизонтально внутри своего родительского элемента.
Применения этого класса:
При выравнивании текста по центру при помощи свойства text-align помните, что он будет центрирован внутри содержащего его контейнера, и необязательно относительно всей страницы.
Центрирование блоков контента с помощью CSS
Блоками являются любые элементы на странице, которые устанавливаются как элементы уровня блока и имеют определенную ширину. Часто такие блоки создаются с помощью <div>.
Наиболее распространенный способ центрирования блоков – это задать для левого и правого отступов значение auto:
Это сокращенная форма свойства margin установит для верхнего и нижнего отступа значение 0, а левый и правый отступы будут использовать значение auto. Таким образом занимается все доступное место и делится равномерно между двумя сторонами, что равносильно HTML div align.
Применение в HTML:
Поскольку блок имеет определенную ширину, он будет центрирован внутри содержащего его элемента. Текст, находящийся в этом блоке, будет выровнен не по центру, а по левому краю. Так как по умолчанию в браузерах текст выравнивается по левому краю. Чтобы текст был также выровнен по центру, используйте свойство text-align, которое мы описывали ранее.
Центрирование изображений при помощи CSS
Большинство браузеров отобразят изображения по центру при использовании свойства HTML text align. Но не стоит полагаться на этот метод, так как он не рекомендован W3C.
Вместо этого следует явно указать браузеру, что изображение является элементом уровня блока. Вот код CSS для этого:
Вот HTML код для изображения, которое нужно центрировать:
Также можно центрировать объекты с помощью встроенного CSS:
Вертикальное центрирование элементов с помощью CSS
HTML vertical align всегда было проблематичным в веб-дизайне, но с выходом спецификации CSS Flexible Box Layout Module в CSS3, появилось решение для этой задачи.
Вертикальное выравнивание работает также как и горизонтальное, описанное выше. Свойство vertical-align со значением middle:
Недостатком этого подхода является то, что не все браузеры поддерживают CSS FlexBox. Если есть проблемы с более ранними версиями браузеров, W3C рекомендует центрировать текст вертикально в контейнере, используя следующий метод:
- Поместите элементы, которые нужно центрировать, внутрь элемента-контейнера, такого как div;
- Задайте минимальную высоту элементу-контейнеру;
- Объявите элемент-контейнер;
- Установите для HTML vertical align значение middle.
Например:
HTML код:
Вертикальное центрирование и ранние версии Internet Explorer
Существует несколько способов заставить IE центрировать объекты, а затем воспользоваться условными комментариями. Хорошая новость заключается в том, что в связи с недавним решением Microsoft отказаться от поддержки старых версий IE эти браузеры должны скоро исчезнуть, тем самым облегчив для веб-дизайнеров использование таких современных подходов к разметке как CSS FlexBox.
Перевод статьи «Use CSS to Center Images and Other HTML Objects» был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Вступление
Люблю решать интересные задачи по верстке, а с учетом моего опыта в этой сфере, чуть больше 5 лет, такие задачи попадаются не часто.
Недавно столкнулся сразу с несколькими такими задачами:
1. Центрирование изображения по центру страницы с сжатием его при ресайзе браузера.
2. Абсолютное центрирование изображение вне зависимости от размера окна браузера.
В принципе и первая и вторая задача решаема с помощью маленького javascript но мне хотелось сделать это по уму через html+css.
Еще задача облегчалась тем, что сайт, на котором это будет использоваться, разрабатывался современным, и поддержка ограничивалась ie9+, FF, Chrome, Safary, Opera.
А теперь приступил непосредственно к решению задач.
1. Центрирование изображения по центру страницы с сжатием его при ресайзе браузера
За основу метода я использовал хак с центрированием блока через псевдоелемент, inline-block структуру и vertical-align:
<div class="wrapper"> <div class="item"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> .wrapper{ height: 200px; } .item{ width: 100%; height: 100%; vertical-align: middle; text-align: center; } .item:after{ content: ''; display: inline-block; height: 100%; vertical-align: middle; } Способ вроде старый, думаю описывать как, что и зачем тут работает не нужно. Если мне не изменяет память я даже видел на хабре что то подобное, только с использованием лишнего блока, роль которого в моём примере исполняет :arter.
Немного преобразовав этот способ у меня вышло такое:
<div class="wrapper"> <div class="item"> <img src="image" alt=""> </div> </div> .wrapper{ overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; font-size: 0; line-height: 0; } .item{ width: 100%; height: 100%; vertical-align: middle; text-align: center; white-space: nowrap; } .item:after{ content: ''; display: inline-block; height: 100%; vertical-align: middle; } img{ max-width: 100%; max-height: 100%; vertical-align: middle; } Как можно видеть из примера, внешний блок, .wrapper, я растянул на весь экран. Блок .item стили не изменил. И добавились только стили для нашего изображения, которые выравнивают картинку по вертикальному центру и следят что бы картинка не была больше родительского блока и по высоте и по ширине.
В итоге у нас красивый и аккуратный код, быстрая работа браузера в выравненные картинки.
Пример
Пример с кодом
2. Абсолютное центрирование изображение вне зависимости от размера окна браузера.
А вот с этим пришлось повозиться. Изначальная идея была такая:
<div class="wrapper"> <div class="item"> <img src="image" alt=""> </div> </div> .wrapper{ overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .item{ position: absolute; top: 50%; left: 50%; display: inline-block; } .item img{ margin: -50% 0 0 -50%; } Идея строилась та такой логике:
- Внешний блок, .wrapper, растянутый на всю свободную ширину и высоту.
- Внутренний блок, .item, принимает ширину и высоту у картинки, которая расположена внутри, так как он inline-block; и выставляется верхним левым углом в центр родительского блока.
- Вынос картинки в минусовой margin, который как раз должен был её выровнять точно по центру .wrapper
Но вполне логичную идею ворвалась еще более логичная зависимость. 50% отступ высчитывается на основании половины высоты или ширины родителя. В моём случае ширина и высота родителя строились на ширине и высоте картинке, а после того как картинка сдвигалась в -50% то и родитель, .item, уменьшался на эти же 50% и круг замыкался.
Решил я это вспомнив об transform, а точней об его функции translate, которая как бы сдвигает отображение объекта, но оставляет место где он был. И получилось что заменив margin картинки на transform: translate(-50%, -50%); задача сразу решается. И вот что вышло в конце:
<div class="wrapper"> <div class="item"> <img src="image" alt=""> </div> </div> *{ padding: 0; margin: 0; vertical-align: top; } html, body{ width: 100%; height: 100%; } .wrapper{ overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .item{ position: absolute; top: 50%; left: 50%; display: inline-block; } .item img{ -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } Пример
Пример с кодом
ЗЫ: Я не уверен единственные ли это варианты или нет. Думаю не всем эти варианты подойдут.
Но я точно знаю, что если они подошли в моём случае, то найдутся люди которых они возможно очень выручат в ихних задачах. К тому же если чуть чуть дополнить код можно добавить костыли и для более старых IE, я не добавлял так как не хотел ради очень устаревших браузеров портить чистый код.
ЗЫ2: Критика и советы очень приветствуются. Спасибо что дочитали до конца.
habr.com
Выравнивание картинки HTML
Кода вы верстаете страницу, и в каком-то единичном случае вы заранее знаете, что данное изображение должно быть по центру блока, то вы можете сделать выравнивания картинки по центру в html коде, обернув картинку в тег <p> с определённым классом, и используя тег <style>, задать для этого класса css-свойство text-align:
Или же можно сделать еще проще и добавить в тег <img> атрибут style:
Выравнивание картинки по центру CCS
В случае если у вас есть несколько изображений, которые нужно выровнять по центру, то лучше подойдёт выравнивание картинок по центру путём внесения правок в файл CSS-стилей страницы или сайта. Для этого нужно присвоить изображению класс и дописать показанные ниже css-свойства.
HTML:
CSS:
Этот способ выравнивания картинки css работает практически всегда. Задавать изображению класс не обязательно. Вы можете обратиться к нему через класс блока в котором оно находится. Например:
Так же можно воспользоваться альтернативным вариантом выравнивания картинки по центру, обернув изображение в абзац тегом <p> и, по аналогии с вариантом для HTML, задать абзадцу свойство text-align:center.
HTML:
CSS:
С помощью показанных в этой статье способов выравнивания картинок в html и css вы сможете выровнять нужное вам изображение практически в любой ситуации. В своей практике я стараюсь чаще использовать вариант с использованием text-align:center; или margin:auto, в зависимости от ситуации.
На этом я, пожалуй, закончу статью. Надеюсь, данная статья поможет вам разобраться с выравниванием картинок в html и css и вы сможете подобрать для себя наиболее удобный вариант.
Не забывайте делиться статьей в социальных сетях и оставлять комментарии, а так же заходите на мой канал на YouTube, где вы найдете много интересных видео по разработке сайтов, обзору полезных плагинов и скриптов.
Желаю вам успехов в создании своего сайта! До встречи в следующей статье!
С уважением Юлия Гусарь
impuls-web.ru
Комментарий добавил(а): Денс
Дата: 2011-03-19
Вот этот сайт http://londonisdream.ucoz.ru/.Вот Html код этой страници <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>$SITE_NAME$ — $MODULE_NAME$</title> <?$META_DESCRIPTION$?> <link type="text/css" rel="StyleSheet" href="/.s/src/css/823.css" /> </head> <body> $ADMIN_BAR$ <div id="wrap"> <div id="contanier"> <table class="main-table"> <tr> <td class="data-block">$WDAY$<br>$DATE$<br>$TIME$</td> <td class="login-block"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><!—<s5200>—>Вы вошли как<!—</s>—> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!—<s3167>—>Группа<!—</s>—> "<u>$USER_GROUP$</u>"<?else?><!—<s5212>—>Приветствую Вас<!—</s>—> <b>$USERNAME$</b><?endif?><br><?endif?><a href="$HOME_PAGE_LINK$"><!—<s5176>—>Главная<!—</s>—></a><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$"><!—<s5214>—>Мой профиль<!—</s>—></a><?else?> | <a href="$REGISTER_LINK$"><!—<s3089>—>Регистрация<!—</s>—></a><?endif?> <?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$"><!—<s5164>—>Выход<!—</s>—></a><?else?> | <a href="$LOGIN_LINK$"><!—<s3087>—>Вход<!—</s>—></a><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$">RSS</a><?endif?></td> </tr> <tr> <td class="side-block"> <body bgcolor="#000000" background= " http://www.rumb.ru/files/articles/685_london_nochju.jpg"></body> <!— <sblock_menu> —> <?if($SMENU_1$)?> <table class="boxTable"><tr><td class="boxContent"><!— <bc> —>$SMENU_1$<!— </bc> —></td></tr></table> <?endif?> <!— </sblock_menu> —> $GLOBAL_CLEFTER$ </td> <td class="content-block"> <h1 class="logo"><!— <logo> —>Мой сайт<!— </logo> —></h1> <div class="text-block"> <!— <middle> —> <?if($MODULE_NAME$)?><h1 class="module-name">$MODULE_NAME$</h1><?endif?><!— <body> —>$CONTENT$<!— </body> —> <!— </middle> —> </div> </td> </tr> </table> $GLOBAL_BFOOTER$ </div> </div> </body> </html>
www.uzeron.com
Форматы графических изображений.
Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.
1. Формат JPEG (Joint Photographic Experts Group). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными. Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.
2. Формат GIF (Graphics Interchange Format). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.
3. Формат PNG (Portable Network Graphics). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.
При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:
- GIF используется в основном для анимации;
- PNG — формат для всего остального (иконки, кнопки и др.).
Вставка картинок в html страницы
Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег <img>. Браузер помещает изображение в том месте веб-страницы, где встретит тег <img>.
Код вставки картинки в html страницу имеет такой вид:
<img src=»image.jpg»>
Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src. Что такое атрибут html-тега я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла.
Приведу еще несколько примеров указания адреса файла с изображением:
<img src=»/images/image.jpg»> — этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.
В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:
<img src=»http://mysite.ru/images/image.jpg»>
Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.
Тег <img> является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега <p> — абзац:
<p><img src=»/images/image.jpg»></p>
Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:
Тогда html-код страницы со вставленной картинкой будет таким:
<!doctype html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Сайт об автомобилях.</title>
</head>
<body>
<h1>Сайт об автомобилях.</h1>
<p><img src=»/images/bmw.jpg»></p>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком <strong>автомобиль</strong> это:</p>
<p><em>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами</em>.</p>
<hr>
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>
<p>Все права защищены. © 2010 год.<br>Сайт об автомобилях.</p>
</body>
</html>
И смотрим результат отображения в браузере:
Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега <img>.
Атрибут alt — как запасной вариант
Поскольку файлы с изображениями хранятся отдельно от веб-страниц, то для их получения браузеру приходится делать отдельные запросы. А что если изображений на странице будет очень много и скорость подключения к сети маленькая, тогда на загрузку дополнительных файлов потребуется значительное время. А еще хуже если изображение было удалено с сервера без вашего ведома.
В этих случаях сама веб-страница будет успешно загружена, только вместо изображений будут отображаться белые прямоугольники. Поэтому, чтобы сообщить пользователю информацию, что представляет из себя изображение применяется атрибут alt. С помощью этого атрибута указывается так называемый текст замены, который будет отображаться в пустом прямоугольнике пока изображение не загрузится:
<p><img src=»image.gif» alt=»здесь должна быть картинка»></p>
И примерно так это выглядит:
Задаем размеры изображению
Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width и height. Вы можете использовать их, чтобы указать размеры изображения:
<p><img src=»image.jpg» width=»300″ height=»200″></p>
В обоих атрибутах указывается размер в пикселях. Атрибут width указывает браузеру какой ширины должно быть изображение, а атрибут height какой высоты. Эти два атрибута можно применять вместе и по отдельности. Например, если вы укажите только атрибут width, то браузер подберет высоту автоматически пропорционально указанной ширине и также в случае использования только атрибута height. В случае если вы не укажите эти атрибуты вовсе, то браузер автоматически определить размер изображения перед выводом его на экран. Стоит только заметить, что указывание размеров изображений немного ускорит работу браузера при отображении страницы.
На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт…
Вставляем видео и аудио с помощью HTML 5
В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.
Для вставки аудио HTML5 предоставляет парный тег <AUDIO>. Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:
<audio src=»sound.wav»></audio>
Тег <audio> создает на странице блочный элемент. По умолчанию браузер не будет воспроизводит аудиоролик. Что бы он это сделал, в теге <audio> необходимо указать особый атрибут autoplay. Особый, потому что он не имеет значения. Достаточно одного присутствия этого атрибута в теге, чтобы он начал действовать.
По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге <audio> поставить атрибут без значения controls, браузер выведет в том месте веб-страницы, где проставлен тег <audio>, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:
<audio autoplay controls src=»sound.wav»></audio>
Для вставки видеоролика на веб-страницу предназначен парный тег <video>. С этим тегом все тоже самое, что и с тегом <audio> — адрес видеофайла указывается с помощью атрибута src, а с помощью атрибутов autoplay и controls можно запустить автовоспроизведение ролика и вывести элементы управления воспроизведения видеоролика.
Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги :
- с помощью атрибута alt тега <img> можно задавать текст замены на случай если изображение не загрузится;
- с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
- для вставки аудио и видео в html5 есть парные теги <audio> и <video> соответственно.
Если что не понятно, спрашивайте в комментариях и не забудьте подписаться на обновления моего блога. До встречи в следующих постах!
webcodius.ru