HTML изображение и текст
Посмотрим, как разместить текст слева или справа изображения.
В предыдущем уроке мы рассмотрели метод вывода HTML изображения с расширением .jpg на web-страницу и то, как установить дополнительное расстояние между ним, и текстом. Продолжим наше знакомство с тегом и особенностями его взаимодействия с элементами текста.
Навигация по странице
- Текст вверху, внизу, по центру изображения на HTML странице сайта
- HTML изображение слева – текст справа
- HTML изображение справа – текст слева
Текст вверху, внизу, по центру изображения
| Текст вверху изображения Текст по центру изображения Текст внизу изображения |
Атрибуты и значения
- align=»top» – выравнивает изображение и текст по верху.
- align=»middle» – выравнивает изображение и текст по центру, по вертикали.
- align=»bottom» – выравнивает изображение и текст по низу.
Н апомню, что для web применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif).
Обратите внимание на способ подгрузки изображения: ../images/2121.png . Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самого изображения.
HTML изображение слева – текст справа
| Изображение обтекает текст слева Изображение обтекает текст слева Изображение обтекает текст слева Изображение обтекает текст слева |
HTML изображение справа – текст слева
| Изображение обтекает текст справа Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа |
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML изображение 
HTML изображение, текст 
HTML верстка сайта
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML изображение, текст? – Не вопрос!
Как сделать текст внизу страницы html
Пользователь
Регистрация: 11.08.2009
Сообщений: 55
Как разместить текст внизу страницы по центру
Как разместить текст внизу страницы по центру? Нужно на html.
Уже не удобно спрашивать, но надеюсь в очередной раз на помощь.
Форумчанин
Регистрация: 10.01.2011
Сообщений: 112
верстка табличная или дивная?
попробуй
margin: 0 auto;Для спасибо весы слева
Пользователь
Регистрация: 11.08.2009
Сообщений: 55
Дивная. Не помогает.
Форумчанин
Регистрация: 10.01.2011
Сообщений: 112
полный код смотреть нужно или ссылку
Для спасибо весы слева
Пользователь
Регистрация: 11.08.2009
Сообщений: 55
Интересует пример с размещением копирайта в не табличной форме с помощью position.
Пользователь
Регистрация: 11.08.2009
Сообщений: 55
Должно в теории быть элементарно, но что-то я голову ломаю и не понимаю
Форумчанин
Регистрация: 10.01.2011
Сообщений: 112
left: 50%;Для спасибо весы слева
Пользователь
Регистрация: 11.08.2009
Сообщений: 55
Спасибо! Работает)))
Форумчанин
Регистрация: 10.01.2011
Сообщений: 112
Для спасибо весы слева
Для спасибо весы слева
Участник клуба
Регистрация: 23.07.2007
Сообщений: 1,054
text-align:center;Писано по д’Эльфийски
| Похожие темы | ||||
| Тема | Автор | Раздел | Ответов | Последнее сообщение |
| Как правильно разместить текст на сайте. | XYLIGANXYL | HTML и CSS | 5 | 30.01.2011 04:20 |
| разместить таблицу по центру! | ny6asik | Помощь студентам | 4 | 24.10.2010 20:31 |
| как получить текст HTML страницы | пауэрлифтинг | Работа с сетью в Delphi | 4 | 16.03.2010 13:42 |
| Как прочесть текст с html-страницы? | Poseydon | Общие вопросы C/C++ | 8 | 10.11.2009 22:19 |
| Необходимо разместить таблицу по центру страницы | Никки | HTML и CSS | 1 | 10.02.2009 23:26 |
Как прижать текст к низу блока?
Мужики, можно ли как-нибудь прижать текст к низу в том виде, в котором HTML, без обертываний в span, p, и div?
table-cell не помогает, тк ломаются сами родительские блоки, хотя текст к низу липнет.
Дело в том, что в этих двух блоках текст может быть как одно слово, так и в две строки.
- Вопрос задан более трёх лет назад
- 69891 просмотр
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Тыжверстальщик! Наверстай мне упущенное.
Разместить текст внизу по середине страницы HTML/CSS
Может быть на этот вопрос есть где-то ответ, но я ничего не нашел. Я делаю простенький сайт, можно сказать для изучения основ веб-программирования. Появилось желание сделать что-то типа текста копирайта, типа (c) CoolPerson — 2020 , и нужно разместить его снизу, по середине страницы как это делают обычно на сайтах. В гугле искал, текст размещался в снизу в углу, а мне нужно снизу и по середине. Есть возможность это сделать?
Отслеживать
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков