Люблю решать интересные задачи по верстке, а с учетом моего опыта в этой сфере, чуть больше 5 лет, такие задачи попадаются не часто.
Недавно столкнулся сразу с несколькими такими задачами:

1. Центрирование изображения по центру страницы с сжатием его при ресайзе браузера.

В принципе и первая и вторая задача решаема с помощью маленького javascript но мне хотелось сделать это по уму через html+css.
Еще задача облегчалась тем, что сайт, на котором это будет использоваться, разрабатывался современным, и поддержка ограничивалась ie9+, FF, Chrome, Safary, Opera.

2. Абсолютное центрирование изображение вне зависимости от размера окна браузера.

А вот с этим пришлось повозиться. Изначальная идея была такая:

.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%); задача сразу решается. И вот что вышло в конце:

*{ 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: Критика и советы очень приветствуются. Спасибо что дочитали до конца.

Теги: html, css, css3, изображение, картинка, image, выравнивание, vertical-align

Который позволяет автоматически со сто процентной точностью выровнять любой объект/слой по центру изображения или его краям . Также можно выровнять относительно отдельно взятого участка на изображении. Все это очень просто и об этом пойдет речь в данной статье.

Как правило, новички эту операцию делают на глаз, что совсем не обязательно. Выберите инструмент Перемещение и обратите внимание на его . Там имеется ряд настроек, которые и отвечают за эту задачу (смотрите на скриншоте ):

Первые три кнопки отвечают за выравнивание по вертикали (слева направо): по верхнему краю, по центру, по нижнему краю.

Следующие три кнопки отвечают за горизонтальное выравнивание (слева направо): по левому краю, по центру, по правому краю.

Таким образом, чтобы разместить объект ровно по центру, нужно выбрать центрирование по вертикали и горизонтали.

Самое главное правило выравнивания: прежде всего, вы должны указать фотошопу область, относительно которой программа и должна искать края или середину. Пока вы этого не сделаете, кнопки выравнивания будут не активными, то есть их нельзя нажать.

В этом и кроется секрет того, как сделать объект посередине всего изображения или его отдельного фрагмента.

Итак, последовательность действий следующая:

Допустим, нужно разместить по центру эту картинку:

Вариант 1 — относительно всего холста.

Шаг 1

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

На палитре слоев выделяем фоновый слой и жмем на клавиатуре комбинацию клавиш Ctrl+A (Выделить все ). В результате вы должны увидеть рамку выделения из «марширующих муравьев» вокруг фонового слоя. (Как правило, фоновый слой — совпадает по размерам с холстом).

Примечание

Можно выделить фоновый слой еще другим способом — зажмите клавишу Ctrl и щелкните левой кнопкой мыши по фоновому слою. Способ работает, когда этот слой разблокирован (об этом сигнализирует значок замочка, ).

Шаг 2

Теперь нужно выбрать инструмент Перемещение . Когда у нас есть рамка выделения, то кнопки выравнивания станут активными, а значит их можно использовать.

Выберите слой с картинкой, которую нужно выравнивать, а теперь нажимайте на кнопки в соответствии с тем, куда бы вам хотелось разместить эту картинку. Например, давайте разместим ровно по центру. Тогда нам нужно нажать вот эти кнопки:

Еще пример. Допустим, нужно разместить картинку по центру, но с левого края. Тогда на панели параметров выбираем такие кнопки:

Вариант 2 — в отдельно взятом фрагменте изображения

Допустим, на изображении присутствует фрагмент, внутри которого нужно идеально ровно разместить какую-нибудь картинку. В своем примере я добавил стеклянный квадрат. Пусть внутри него будет находиться другая картинка (кстати, можно научиться самому делать такой стеклянный квадрат).

Шаг 1

Первым делом, по аналогии с первым вариантом, необходимо выделить этот фрагмент. Как этот сделать?

— Если этот фрагмент находится на отдельном слое (как у меня квадрат, который я отдельно вставил), то нужно нажать Ctrl и кликнуть мышью по миниатюре слоя, если он не заблокирован).

— Если этот фрагмент находится в самом изображении, то нужно выбрать инструменты выделения Прямоугольная и Овальная области и с их помощью нарисовать вокруг фрагмента ровную выделенную область. Как пользоваться этими инструментами .Перемещение и, зажав клавишу Shift , нажимате на стрелки направлений на клавиатуре. Картинка будет двигаться с шагом в 10 пикселей.

Если не зажимать эту клавишу, а просто пользоваться стрелками клавиатуры, то картинка будет двигаться с шагом в 1 пиксель.

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter . Спасибо!

Возможности: Настройка: Использование: Скриншоты: Где скачать ELinks является попыткой создать современный текстовый веб браузер. Проект начался на основе кода браузера Links. Его целью сначала было попытаться реализовать несколько функций более или менее отсутствующих / слабых в Links. Откуда «E» в «ELinks» — «Experimental» / «Экспериментальный» . После успеха предпринятых усилий «E» стала пониматься как «Extended» / «Расширенный» или «Enhanced» / «Усовершенствованный». Когда браузер Links достиг определенной степени завершенности, превосходящей в некоторых отношениях тогда самый продвинутый веб браузер Lynx, дальнейшее его развитие оказалось на перепутье: двигаться к отображению графики и далее за пределы чистого текста или продвинуть веб-серфинг с использованием текстового интерфейса пользователя за пределы достигнутые сначала Lynx и затем Links — оставаясь однако в текстовом режиме. Первое направление реализовалось в версии Links способного отображать графическое содержимое веб-страниц — Links2. Второе — это веб браузер ELinks. Lynx был и остается очень проработанным образцом программного обеспечения своего типа. Его авторы задумали и реализовали весьма продуманную и основательную концепцию просмотра веб-страниц в текстовом режиме с особыми абстракциями и условностями, которые помогали преодолеть многие ограничения и недостатки веб-серфинга с использованием текстового интерфейса и создали мир столь отличный от быстро расширяющейся графической части интернета. Но HTML и компьютеры развивались дальше, началось распространение языков сценариев, весь мир представления, нахождения и потребления информации двигался вперед, менялся. Появились новые возможности. Многие из этих возможностей были реализованы в Links, но следующие изменения в визуальном представлении информации в веб документах — от больше HTML к больше CSS — сделали открытыми новые дороги; даже оставаясь в текстовом режиме. И это стараются реализовать в ELinks: поддержка отображения цвета в поддерживающих эту возможность эмуляторах терминала, немного позиционирования с помощью CSS и даже какая-то поддержка JavaScript / ECMAScript. Техническая сторона сетевых технологий (как поддержка SSL) и поддержка различных кодировок текста были уже весьма основательны в браузере Links, но в ELinks некоторые возможности были улучшены, а другие более проработаны. ELinks это шаг вперед в концепции консольного веб браузера, что делает ELinks самым продвинутым примером её реализации. Хотя Lynx все еще вполне удерживает свои позиции. Его концепция просмотра веб-страниц в текстовом режиме даже представляя собой упрощение, особенный подход к представлению информации и обращению с ней, а не стремление походить на среду графических браузеров — работает весьма неплохо. Веб документы становятся все более и более сложно реализованными и (имея все неизбежные ограничения просмотра веб-страниц в текстовом режиме) следовать по особому пути в обращении с ними, это способ вполне могущий конкурировать с попыткой быть как основные, графические полнофункциональные веб браузеры настольных компьютеров. Это аналогично дилемме браузеров для мобильных устройств с небольшими дисплеями: пробовать имитировать компьютеры с большими дисплеями или трансформировать отображаемые веб документы, делая их соответствующими характеристикам среды. Текстовые браузеры большей частью используются на компьютерах с более или менее крупными дисплеями, так что тут меньше ограничений по размерам и больше соблазнов: Lynx — оставаться сдержанным, ELinks — выйти за пределы. Возможности Текстовый веб браузер. Версии для Linux, других *nix систем, Windows, DOS, OS/2, BeOS и еще некоторых других. HTML (в том числе таблицы и фреймы). Весьма ограниченно CSS и JavaScript (Подробнее). Поддержка цветовой палитры в 16, 88 или 256 цветов в поддерживающих эту возможность эмуляторах терминала / консолях. Поддержка вкладок, фоновых загрузок с оповещением об окончании загрузки. Поддержка мыши. Редактирование текстовых полей форм веб-страниц во внешнем текстовом редакторе. Горячие клавиши для URL. Поддержка сценариев на Perl, Lua, Guile, Ruby.

Imapsync. Перенос почты

Перенос почты c одного IMAP сервера на другой с помощью imapsync [ 1 ] / Linux, командная строка: imapsync —host1 imap.this.com —user1 [email protected] —passfile1 /home/user/imap/passwordfile1 —ssl1 —host2 imap.another.com —user2 [email protected] —passfile2 /home/user/imap/passwordfile2 —ssl2 —skipsize —allowsizemismatch — Имеется сайт example.com и почтовый ящик [email protected] на сервере некоей хостинговой компании. IMAP сервер: imap.this.com. IMAP сервер поддерживает SSL. — Осуществляется перенос сайта example.com к другому хостеру. Соответственно, и почтового ящика [email protected] со всем его содержимым и с сохранением структуры папок. IMAP сервер другого хостинг-провайдера: imap.another.com. IMAP сервер поддерживает SSL. 1. Создать почтовый ящик [email protected] и пароль к нему на сервере той хостинговой компании, куда происходит перенос. 2. Создать два текстовых файла в папке /home/user/imap/: passwordfile1 с паролем к почтовому ящику на первом IMAP сервере и passwordfile2 с паролем к почтовому ящику на втором IMAP сервере. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Установить imapsync 6. Запустить imapsync с соответствующими параметрами и данными Imapsync переносит почту с сохранением структуры папок с imap.this.com на imap.another.com. SSL используется для шифрования данных в процессе передачи, а пароли сохранены в файлах, защищенных установкой прав доступа chmod 600. Перенос почты между двумя сервисами электронной почты может потребовать использования дополнительных параметров [ 2 ] imapsync. Например, при переносе содержимого одного почтового ящика Gmail.com на другой необходимо указать «—port1» и «—port2»: imapsync —host1 imap.gmail.com —port1 993 —user1 [email protected] —passfile1 /home/user/imap/passwordfile1 —ssl1 —host2 imap.gmail.com —port2 993 —user2 [email protected] —passfile2 /home/user/imap/passwordfile2 —ssl2 —skipsize —allowsizemismatch [ 1 ] Простой и обычный случай: содержимое одного электронного почтового ящика переносится на другой — пустой, находящийся на другом сервере. Но могут быть и более сложные ситуации: Gmail to Google Apps Email Migration and Moving to Google Apps with imapsync. [ 2 ] Другие параметры: Migrate mail from one server to another with imapsync and imapsync(1) — Linux man page.

Фоновое HTML изображение

Урок 10.

CSS. Выравнивание картинки по центру

HTML изображение, вставка изображения в код страницы

HTML тег, отвечающий за вывод изображения

• HTML изображением может быть любое изображение в формате PNG, JPEG и GIF.
• HTML код изображения определяется тегом.
• HTML изображение может быть фоном интернет-страницы.
• HTML изображение может быть определено в роле гиперссылки.

1. Вставка изображения в HTML код страницы
2. Расстояние между изображением и текстом по горизонтали, и по вертикали
3. Определяем фоновое изображение в HTML
4. HTML изображение — ссылка и определяющий его код
5. Размещаем HTML изображение по центру страницы или блока

В папку или в любую другую, где у вас находится файл поместите изображение с расширением, скажем, назовите его как угодно, например, .

Вставка изображения в HTML код страницы :

Тег - непарный. Обратите внимание на способ его закрытия.

Атрибуты и значения

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

Указывайте реальные размеры - так вы сохраните первоначальное качество изображения.

Для web разработок применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif). Adobe Photoshop является специализированным средством по созданию графики для сайтов. С его помощью можно конвертировать один формат изображения в другой.

HTML изображение | Отступы по горизонтали и по вертикали

или расстояние по горизонтали и по вертикали между изображением и текстом

Посмотреть результат в новом окне: Фоновое изображение в HTML

Атрибуты рассматриваются в CSS уроках.

Вставка изображения и ее порядок → → смотрите здесь.

HTML изображение — ссылка

Код примера:

Посмотреть результат в новом окне: HTML изображение по центру страницы

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

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 9. HTML фонHTML изображение Урок 11. HTML изображение и текст

Как выровнять центр картинки по центру блока div?

Уже давно существуют разные методы выравнивания картинок по центру с помощью CSS. На реализацию этих методов сильно влиял Internet Explorer 5. Но сегодня эта версия браузера мало кого интересует, поэтому можно избавиться от лишнего кода.

Раньше IE5 и IE5.5 диктовали свои правила — для того, чтобы выровнять элемент страницы по центру, необходимо использовать CSS-свойство. И чтобы отцентровать, например, картинку, необходимо размещать её внутри дополнительного блока:

Для этого дополнительного блока присваивается соответствующие CSS-свойство:

Всё это было необходимо потому, что Internet Explorer пятых версий не поддерживает уже тогда существовавшее и поддерживаемое другими браузерами свойство внешних отступов, которое автоматически налету присваивает одинаковое расстояние слева и справа от выравниваемого элемента. Вышеприведённый способ всё ещё используется.

Но IE5 и IE5.5 уже в прошлом, поэтому HTML-код можно сделать проще и элегантнее:

Отсутствие ненужных дополнительных блоков достигается благодаря соответствующему 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. При этом тег должен располагаться внутри абзаца (тег

). Чтобы не получилось так, что все абзацы на странице начали выравниваться по центру, введем свой класс fig, и все действия будем производить с ним. В примере 1 показано, как это сделать.

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

HTML5CSS 2.1IECrOpSaFx

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

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

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

. Чтобы текст подписи отличался по своему виду от обычных абзацев, сделаем его курсивным и выделим другим цветом (пример 2).

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

HTML5CSS 2.1IECrOpSaFx

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

Как выровнять фотографию по центру веб-страницы?

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

Для блока с фотографией используется тег

, а для подписи к нему тег