Как в html рядом с картинкой написать текст
Бывает так, что нужно вывести картинку и приписать название (короткую фразу). Для этого есть такие параметры:
• align=»top» – выравнивает текст по верху изображения.
• align=»bottom» – выравнивает текст по низу.
• align=»middle» – выравнивает текст по центру.
Ниже приведён код, в котором демонстрируется работа выше описанных параметров.
Красивая пчёлка
Очень симпатичная пчёлка
Тоже ничего.
Теперь посмотрим, как нужно выводить картинку при большом количестве текста.
Есть два параметра:
• align=»left» – изображение «обтекает текст» слева.
• align=»right» – изображение «обтекает текст» справа.
Для наглядности напишите такой код:
Солнце
По форме Солнце близко к идеальной сфере с диаметром 1392000 км. Оно вмещает в себя орбиту Луны, и еще остается много места. Фактически более миллиона таких планет как Земля свободно поместились бы внутри Солнца. Кроме того, если бы вы смогли вести машину по его поверхности со скоростью 88 км/ч, у вас бы ушло 5 с половиной лет, чтобы объехать Солнце один раз (притом не останавливаясь). Но размер Солнца не постоянен. Современные исследования показывают, что диаметр Солнца уменьшается приблизительно на 1 метр в час. Если этот феномен проходил и в прошлом столетии, тогда Солнце, которое мы видим сейчас на 800 км меньше, чем то, которое видели наши предки. Возможно, это солнечное сжатие является частью долговременного колебания, которое помогает стабилизировать громадный выброс энергии.
Луна
Это единственный естественный спутник Земли. Масса Луны составляет 0,0123 массы Земли (приблизительно 1/81) или 7,6.1022 кг. Диаметр Луны чуть больше четверти земного (0,273) или 3 476 км. Луна освещает Землю в 500 000 раз слабее Солнца). На Луне нет привычной для нас атмосферы, нет рек и озёр, растительности и живых организмов. Сила тяжести на Луне в шесть раз меньше, чем на Земле. День и ночь с перепадами температур до 300 градусов длятся по две недели.
Но как вы видите может быть так, что текст и картинка слишком близко находятся друг к другу. Что бы исправить это, нужно просто задать некоторую нужную величину толщины рамки и цвет, как у заднего фона.
Астрономическое явление, которое заключается в том, что Луна закрывает (затмевает) полностью или частично Солнце от наблюдателя на Земле. Солнечное затмение возможно только в новолуние, когда сторона Луны, обращенная к Земле, не освещена, и сама Луна не видна. Затмения возможны только если новолуние происходит вблизи одного из двух лунных узлов (точки пересечения видимых орбит Луны и Солнца), не далее чем примерно в 12 градусах от одного из них.
Источник статьи: http://olocoder.ru/HTML9.html
Расположить текст относительно картинки [закрыт]
Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.
При использовании данного кода, получается вот так
(Треугольничек это картинка-логотип, текст это текст логотипа).
В чем вопрос: Как текст сделать ровно по центру картинки справа. Внутренний перфекционист негодует.
3 ответа 3
Способов выравнять логотип, относительно названия компании бесконечное множество и ограничены они лишь нашей фантазией.
Для того чтобы точно ответить на вопрос я использовал именно ту вёрстку, которую предоставил автор, однако если выйти за её рамки, то возможно изначальной проблемы даже не было.
Однако, хочу заметить, что несмотря на то, что я использовал вёрстку автора вопроса, результат у него может отличаться за счёт наложения ранее им написаных стилей.
Для того чтобы этого не происходило, рекомендую автору вопроса указывать классы и идентификаторы объектам и тщательнее подходить к выбору селекторов при составлении правил CSS.
Отрицательный margin
Указываем отрицательный отступ снизу, тем самым смещаемся «под строку», на которой расположено изображение.
вертикальное выравнивание изображения
Указываем, что изображение должно выравниваться посередине относительно строки.
смещение лого с помощью transform
тут посложнее.
похожий на первый вариант, только смещаемся относительно строки с помощью модного свойства transform
позиционирование+растягивание
тут ещё сложнее и без допинга не все смогут разобраться
указываем, что изображение абсолютно позиционировано относительно родительского объекта
указывая нулевое расстояние до границ родительского объекта растягиваем его на 100% родительской высоты
после указания автоматического отступа сверху и снизу, изображение позиционируется по средней линии родительского объекта
т.к. изображение позиционируется абсолютно, то оно заезжает на текст
чтобы пофиксить добавим внутренний отступ родительскому объекту и внешний изображению
отступ должен быть равен ширине картинки
Продолжать можно бесконечно, однако изощрённость ответов будет увеличиваться.
Опять же подчеркну, что если изменить вёрстку, то отделаться можно было бы и более простыми приёмами.
Суть не в этом
Если описанные выше способы не будут Вам подходить, это значит, что проблема лежит за пределами указанного Вами кода и там Вы сделали то, чего делать не стоило.
И вероятность этого достаточно высока, т.к. Вы уже жаловались, что ответы данные Вам ранее Вам не подходят, несмотря на то, что в изолированной среде они работают отлично. Поэтому я не стал увлекаться с «бесконечным списком» и решил подождать реакцию автора вопроса.
Проверяйте и отписывайтесь по результату
Если ответ не подходит, но Вы предоставите достаточное количество исходных данных, Мы всегда Вам поможем.
Изображения в тексте
Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее.
Рисунок по центру
Для выравнивания изображения по центру колонки текста, тег помещается в контейнер
, для которого устанавливается атрибут align=»center» . Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig , и применим его для нужных абзацев, как показано в примере 1.
Пример 1. Выравнивание рисунка по центру
В данном примере класс fig добавляется к селектору P , а способ выравнивания определяется свойством text-align . Положение рисунка относительно текста схематично показано на рис. 1.
Рис. 1. Рисунок в центре колонки текста
Обтекание рисунка текстом
Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.
Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа
Так, у тега есть атрибут align , который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right , для выравнивания по левому краю применяют left . Атрибут align часто используют в связке с другими атрибутами тега — vspace и hspace . Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).
Пример 2. Использование свойств тега
Горизонтальный отступ от картинки до текста управляется атрибутом hspace , он добавляет пустое пространство одновременно слева и справа от изображения. Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него на величину, указанную значением hspace .
Для обтекания картинки текстом также можно применить стилевое свойство float . Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.
Пример 3. Использование стилей
В данном примере к тегу добавляется класс fig , для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom .
Рисунок на поле
При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).
Рис. 3. Изображение размещается на поле слева от текста
Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin .
Применение таблиц
Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега
Пример 4. Создание рисунка на поле с помощью таблиц
Результат примера показан на рис. 4.
Рис. 4. Изображение слева от текста
В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.
Использование стилей
В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic , а текст, сильно не мудрствуя, в слой text . Теперь для слоя piс следует установить свойство float со значением left , а для text — margin-left . Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).
Пример 5. Использование margin
Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.
Если рисунок следует расположить справа от текста, то значение float меняем на right , а свойство margin-left на margin-right .
Источник статьи: http://htmlbook.ru/content/izobrazheniya-v-tekste
Как разместить изображение на веб-странице слева от текста
Выравнивание изображения по левому краю страницы, в то время как текст обтекает его, является довольно распространенным решением. В веб этот эффект известен как « смещение » изображения. Подобный стиль реализуется с помощью CSS-свойства float left , которое задает обтекание текстом выровненного по левому краю изображения.
Начинаем с HTML
Для нашего примера мы создадим абзац текста и добавим в начале изображение ( перед текстом, но после открывающегося тега
). Вот как выглядит HTML-разметка :
По умолчанию веб-страница будет отображаться с изображением над текстом. Это связано с тем, что в HTML изображения являются блочными элементами. Это значит, что браузер отображает разрывы строки до и после изображения. Мы изменим это поведение по умолчанию с помощью CSS . Но сначала добавим к нашему элементу изображения значение класса:
Стили CSS
Включив в HTML-код атрибут класса « left », можно перейти к vertical align central float left . Мы добавим в таблицу стилей правило, которое задаст смещение изображения. А также несколько дополнительных правил, которые обеспечат, чтобы текст не прилегал к изображению вплотную, обтекая его.
Этот код смещает изображение влево и добавляет небольшие отступы справа и снизу от изображения.
Если просмотреть в браузере страницу, то изображение в ней будет выровнено по левому краю, а текст абзаца будет отображаться справа от него с соответствующим отступом. Одно замечание относительно значения класса « left «, которое мы использовали. Имейте в виду, что это значение является произвольным. Мы могли бы назвать класс как угодно, а термин « left » сам по себе ничего не делает.
Нам просто нужно задать атрибут класса в HTML , который связан с фактическим стилем CSS float left , а он уже определяет визуальные изменения, которые необходимо произвести.
Альтернативные способы
Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS , который смещает элемент, это только один способ « выравнивания по левому краю ». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса « main-content «:
Задать стили для изображения можно с помощью следующего кода CSS :
Изображение будет выровнено по левому краю, текст будет обтекать его, как и раньше, но нам не нужно добавлять дополнительное значение класса в разметку. Этот способ выравнивания float left по центру позволит создать меньший HTML-файл , что повысит производительность.
Также можно добавить стили непосредственно в HTML-разметку , например:
Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.
Предпочтительной практикой считается, когда стили и структура страницы разделены. Это особенно полезно, когда нужно быстро изменять макет страницы, подстраиваясь под различные размеры экрана и устройства на адаптивном сайте. Наличие стиля страницы, смешанного с HTML , значительно усложнит создание медиа-запросов, которые могут корректировать внешний вид сайта по мере необходимости.
Данная публикация представляет собой перевод статьи « How To Float an Image to the Left of Text on a Webpage » , подготовленной дружной командой проекта Интернет-технологии.ру
Источник статьи: http://www.internet-technologies.ru/articles/kak-razmestit-izobrazhenie-na-veb-stranice-sleva-ot-teksta.html