How to place Text and an Image next to each other in HTML?
I want the text and the image to be next to each other but I want the image to be on the far left of the screen and I want the text to be on the far right of the screen. This is what I currently have.
How can I do this?
3 Answers 3
Note that you will probably want to use the style clear:both on whatever elements comes after the code you provided so that it doesn’t slide up directly beneath the floated elements.
You want to use css float for this, you can put it directly in your code.
But I would really suggest learning the basics of css and splitting all your styling out to a separate style sheet, and use classes. It will help you in the future. A good place to start is w3schools or, perhaps later down the path, Mozzila Dev. Network (MDN).
Как вставить картинку и текст в одну строку html
Авторизуясь в LiveJournal с помощью стороннего сервиса вы принимаете условия Пользовательского соглашения LiveJournal
- October 2018
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
09:30 01.10.2009
Как размешать текст и картинки в одной строке?
| Очередное дополнение в |
Порой при написании сообщения в дневнике надо в одной строке разместить картинку и текст. И вот как сделать это красиво?
В этом нам поможет вот этот атрибут «align» (про него можно прочитать тут в примечании №2) и вот этот квадратик:
Процитирую полностью указанное примечание:
Для выравнивания только картинки, атрибут «align» можно добавить в её код.
Например (выравниваем направо):
Чуть ниже привёл все значения этого атрибута.
1. align=»left» — выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
2. align=»right» — выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
3. align=»top» или align=»texttop» — выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
4. «align=middle» – выравнивает базовую линию текущей текстовой строки с центром изображения .
5. «align=absmiddle» – выравнивает центр текущей текстовой строки с центром изображения
6. «align=bottom» и «align=baseline» – выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
7. «align=absbottom» – выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
Примечание:
Базовая линия (baseline или bottom) — это нижняя часть линии текста, которая проводиться без учёта нижней части (descender) некоторых символов, например, букв типа j, q, y. В отличии от выравнивания по базовой линии, при задании значения absbottom выравнивание выполняется по нижней части самого низкого элемента в строке, т.е. по одному из символов строки, имеющему элементы, лежащие ниже базовой линии. Аналогично обстоит дело с различием между параметрами top и texttop.
Картинки в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
Ранее я рассказывал о том, как вставить картинку в HTML-страницу. Если кто пропустил, то см. эту статью здесь.
Сегодня продолжу рассказывать о картинках — рассмотрим ещё некоторые полезные атрибуты тега <img> , а также “фишки” использования рисунков.
Обтекание рисунка текстом в HTML
Если большие картинки обычно вставляются между абзацами, то маленькие чаще вставляются в текст, то есть текст обтекает картинку. Однако если в HTML не принять дополнительных мер, то картинка будет вставлена в текст просто как “буква”, и текст будет продолжаться после картинки одной строкой. Соответственно, если рисунок имеет размер более одной строки, то между строками получится большое пустое пространство, что не очень красиво:
Для выравнивания картинки в тексте в теге <img> можно применить атрибут align . Выравнивание как раз и позволяет добиться обтекания картинки текстом.
Стандарты HTML определяют пять значений для атрибута align :
- left — выравнивание по левому краю
- right — выравнивание по правому краю
- top — выравнивание по верхнему краю
- bottom — выравнивание по нижнему краю (это значение по умолчанию)
- middle — выравнивание по середине
Если вы не используете атрибут align , то выполняется выравнивание картинки по нижнему краю (как на рисунке выше).
Некоторые браузеры могут поддерживать и другие значения, но мы о них говорить не будем, поскольку это уже за рамками стандарта.
Итак, если вы хотите, чтобы текст обтекал картинку справа, то значение атрибута align должно быть равно left . Это немного странно, если думать о выравнивании текста. Но мы то выравниваем не текст, а картинку. Поэтому всё правильно — картинка будет слева, а текст — справа.
Пример выравнивания картинки по левому краю (обтекание текстом справа):
<img src=»https://info-master.su/programming/web/html/images-in-html.jpg» align=»left»>
А вот так примерно это будет выглядеть в браузере:
Рамка вокруг рисунка в HTML
Вообще этим пользуются редко, но иногда всё-же необходимо сделать рамку вокруг рисунка. Для этого можно использовать атрибут border . Делается это примерно так:
<img border=»5″ src=»https://info-master.su/programming/web/html/warning.png»>
Здесь мы обводим рисунок рамкой шириной 5 пикселей. По умолчанию цвет рамки будет чёрным. К сожалению, я не знаю простых способов изменить цвет рамки только средствами HTML, а в CSS и прочие прелести я погружаться не буду, так как мой рассказ про HTML.
Некоторые браузеры могут обводить рисунок рамкой по умолчанию, если атрибут border не указан. Поэтому, чтобы быть уверенным в том, что рамки вокруг рисунка не будет, лучше всегда использовать атрибут border с нулевым значением.
Атрибуты hspace и vspace
Итак, выравнивание рисунка в HTML теперь для вас сложности не представляет. Однако есть один неприятный вопрос — текст слишком близко прижат к картинке. Это не очень красиво смотрится.
Как же сделать отступы между текстом и картинкой? Для этого есть атрибуты hspace и vspace , которые задают отступы от горизонтального (справа и слева) и вертикального (сверху и снизу) края картинки соответственно. Пример:
В этом примере мы задаём отступы слева и справа по 50 пикселей, а сверху и снизу — по 10 пикселей. А в браузере это будет выглядеть примерно так:
Картинка в заголовке HTML
Иногда требуется вставить картинку в заголовок. Сделать это несложно. Например:
<h2><img src=»https://info-master.su/programming/web/html/warning.png» alt=». «> Очень важно</h2>
А выглядеть это будет примерно так:
И вообще картинки можно вставлять куда угодно — в таблицы, в списки и т.п.
О картинках много ещё чего можно рассказать. И я как-нибудь вернусь к этому вопросу. Но на сегодня всё.
А если хотите знать больше и прямо сейчас, то изучите курс о вёрстке сайтов.
[HTML,CSS] картинка и надпись на одной строке
как сделать чтобы картинка показывалась на одной строке вместе с надписью?
если слово la-la-la-name-la-la-la длинное, то оно переносится на другую строку, а картинка gnome-fs-share-min.png остаеся на предыдущей.
т.е: как сделать, чтобы они были на одной строке в любом слечае?
так же используется такой css таблицы:
я еще добавил overflow: hidden; чтобы таблицы не «уехала! елси слово будет очнеь длинное.