Выравнивание картинки относительно текста, CSS

@Culesso · Регистрация: 12.11.2014

Студворк — интернет-сервис помощи студентам

Добрый день, очень хочется получить помощь в простом вопросе, но перепробовал все коды, что нашел не могу получить результата (я очень плох в html). Надо выровнять картинку относительно текста, чтобы она упиралась точно в середину строки - я создал отдельный параграф в css для img этого блока, но какой код отвечает за это? Спасибо заранее за помощь.

Вложение 453385

PS Ну или даже лучше текст приподнять, для аналогичного эффекта.

@Fedor92 · 12.11.2014, 12:42

У Вас вложение не работает...

@Culesso · 12.11.2014, 12:58 **[ТС]**

Добавлено через 5 минут
У меня работает при клике на него....
Если в двух словах у меня есть иконка стрелки и за ней идет текст. Текст на уровне иконки стрелки,а мне надо его приподнять, чтобы визуально стрелка упиралась в середину строки этого текста.

@brain-4-me · 12.11.2014, 13:11

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

@Fedor92 · 12.11.2014, 13:15

Это да... Может Вы её бэкграундом делаете, а может картинкой... Ясности не помешает...

@Culesso · 12.11.2014, 13:17 **[ТС]**

#body div .whyme b {
clear: both;
color: #464646;
font-size: 18px;
line-height: 0px;
margin: 0 0 24px;
padding: 0;
}

<p align="right"> <b>Низкие цены, очень качественная продукция(Германия)</b><img src="images/icons/backward.png" allign=left alt="">
</p>

Вот мой код для текста. Центральный ноль в margin отвечает за расположение текста относительно расстояния до стрелки. Остальные две цифры никак не влияют - пробовал в firebud. По сути дела:

>текст, так я хочу. Но так как вставлено изображение, то стрелка (ее наконечник) приходится выше чем сама строка. Я хочу приподнять сам текст относительно картинки (стрелки) чтобы оно упиралась точно в середину строки.

@Fedor92 · 12.11.2014, 13:31

За align="right" - заругает валидатор... allign=left у картинки - это вообще неправильно и не на что не влияет... margin: первый 0 - отступ сверху, второй-отступ справа, третий - отступ снизу... В идеале хотелось бы увидеть саму иконку поскольку не совсем понятно насколько её опускать или поднимать...

@brain-4-me · 12.11.2014, 13:34

согласен с Fedor92, а еще хотелось бы спросить что за новый тег

Сообщение от Culesso

allign=left ...>

@Culesso · 12.11.2014, 13:56 **[ТС]**

Насчет нового тега не травите =) Косячу еще, просто не мог понять как их по разным краям раскидать, но разобрался. Но приподнять текст или опустить картинку никак не получается.
PS Каждую картинку текст засунул в отдельный div

Добавлено через 3 минуты
Я конечно понимаю, что можно сделать новую картинку, залепить на нее текст и вставить картинку с уже готовым текстом в документ. Но уже принципиально хочется разобраться как править такие штуки.

Добавлено через 7 минут
Спасибо за новое слово Валидатор - забил в интеренете хоть узнал что это такое, ввел свою страницу...Обомлел от ужаса =) А выглядит нормально вроде. Но ошибок он насобирал конечно...Большое спасибо - правда.

@Fedor92 · 12.11.2014, 13:58

Сообщение от Culesso

Насчет нового тега не травите =)

Никто не травит - я просто поравил...

Вот Вам вариант... Абсолютно кроссбраузерный...test.7z

@Culesso · 12.11.2014, 14:20 **[ТС]**

Круто конечно =)
Спасибо. Даже css не нужен =) Так и не понял за счет чего это происходит, но потом разберусь =)

Добавлено через 1 минуту
Я так понимаю, что могу удалить настройки для p в css файле и просто сделать float:right или float:left. Мде...=)Все гораздо проще оказалось

@Fedor92 · 12.11.2014, 14:26

Иногда приходится опускать картинки вниз, когда высота иконки меньше высоты блока с текстом... Это делается с помощью padding - внутренних отступов... В Вашем случае высота иконки равна высоте блока с текстом - поэтому получилось нормально... float(это и есть свойство css

)- служит для выравнивания элементов по левому или по правому краю... А можно сделать бэкграундом, если интересно могу наверстать..

@Culesso · 12.11.2014, 14:28 **[ТС]**

Я понял, вы картинку просто уменьшили =) Поэтому она примерно туда и попала. Это конечно тоже вариант, но все таки - неужели невозможно прописать как-то настройки положения текста на экране?

@Fedor92 · 12.11.2014, 14:31

Можно всё... Опять же с помощью padding(например если хотите текст поднять пишите свойство padding-bottom, а если опустить свойство padding-top)... И кстати, для иконки в фотошопе можно сделать тримминг и прозрачный фон, тогда вообще идеально...

@Culesso · 12.11.2014, 14:34 **[ТС]**

Если можно по скайпу пообщаться, я был бы рад. Я бы оплатил работу почасово или как у вас программистов принято. alex_perspecto skype

А вообще я по правде говоря так и не понял как произошло изменение =) Я прост оразмер стрелки поменю наверное и все. Будет примерно так как надо. Padding же вроде в самом HTML прописывается, во всяком случае вчера я так делал, а у Вас не прописано ничего и вышло как раз как надо. Я вставил один в один как у Вас - получил свой первый результат, даже при том, что удалил все настройки в CSS для положения на экране. Верстать не надо - я хочу сам сделать =) Уже принципиально надо идти до конца.

@Fedor92 · 12.11.2014, 14:37

Пообщаться по скайпу можно, но только вечером... Работа...))) Часиков в 9 можно поговорить...

@brain-4-me · 12.11.2014, 14:41

Culesso, молодец, так и надо, только без помощи не обойтись, потому что все под стандарт загнать нельзя) везде надо что то додумывать придумывать

@Culesso · 12.11.2014, 14:44 **[ТС]**

Ладно - проехали. Не хватает мозгов видать. Я в firebud все варианты перепробовал в макете Padding - право/лево перемещается и текст и картинка а верх/низ ну никак. Просто желтая полоса над ней увеличивается/уменьшается. Сделаю картинку с текстом и вставлю ее, или стрелку обрежу немного, чтобы визуально лучше выглядело. Спасибо всем за помощь.

@Fedor92 · 12.11.2014, 14:48

Сообщение от Culesso

Просто желтая полоса над ней увеличивается/уменьшается.

Это блок растягивается...

Сообщение от Culesso

Ладно - проехали. Не хватает мозгов видать.

Дело Ваше...

@Culesso · 12.11.2014, 15:00 **[ТС]**

http://dropmefiles.com/zYD5h

Вот что получилось =) padding bottom добавил в css для b но даже меняя значение текст не смещается относительно картинки.

Добавлено через 8 минут
Site Novizna.rar Вот тут лежит, с той ссылкой напутал =)

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Culesso 0 / 0 / 0 Регистрация: 12.11.2014 Сообщений: 12

	Выравнивание картинки относительно текста, CSS 12.11.2014, 12:41. Показов 9887. Ответов 21 Метки нет (Все метки) Добрый день, очень хочется получить помощь в простом вопросе, но перепробовал все коды, что нашел не могу получить результата (я очень плох в html). Надо выровнять картинку относительно текста, чтобы она упиралась точно в середину строки - я создал отдельный параграф в css для img этого блока, но какой код отвечает за это? Спасибо заранее за помощь. Вложение 453385 PS Ну или даже лучше текст приподнять, для аналогичного эффекта. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.11.2014, 12:42
	У Вас вложение не работает... 0

@Culesso 0 / 0 / 0 Регистрация: 12.11.2014 Сообщений: 12
	12.11.2014, 12:58 [ТС]
	Добавлено через 5 минут У меня работает при клике на него.... Если в двух словах у меня есть иконка стрелки и за ней идет текст. Текст на уровне иконки стрелки,а мне надо его приподнять, чтобы визуально стрелка упиралась в середину строки этого текста. 0

@brain-4-me 162 / 150 / 97 Регистрация: 24.12.2013 Сообщений: 744 Записей в блоге: 12
	12.11.2014, 13:11
	Culesso, ну не знаю...у меня тоже не работает вложение, а так словами понятно чего Вы хотите, а что у вас там в коде творится без понятия.. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.11.2014, 13:15
	Это да... Может Вы её бэкграундом делаете, а может картинкой... Ясности не помешает... 0

@Culesso 0 / 0 / 0 Регистрация: 12.11.2014 Сообщений: 12
	12.11.2014, 13:17 [ТС]
	#body div .whyme b { clear: both; color: #464646; font-size: 18px; line-height: 0px; margin: 0 0 24px; padding: 0; } <p align="right"> <b>Низкие цены, очень качественная продукция(Германия)</b><img src="images/icons/backward.png" allign=left alt=""> </p> Вот мой код для текста. Центральный ноль в margin отвечает за расположение текста относительно расстояния до стрелки. Остальные две цифры никак не влияют - пробовал в firebud. По сути дела: >текст, так я хочу. Но так как вставлено изображение, то стрелка (ее наконечник) приходится выше чем сама строка. Я хочу приподнять сам текст относительно картинки (стрелки) чтобы оно упиралась точно в середину строки. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.11.2014, 13:31
	За align="right" - заругает валидатор... allign=left у картинки - это вообще неправильно и не на что не влияет... margin: первый 0 - отступ сверху, второй-отступ справа, третий - отступ снизу... В идеале хотелось бы увидеть саму иконку поскольку не совсем понятно насколько её опускать или поднимать... 1

@Culesso 0 / 0 / 0 Регистрация: 12.11.2014 Сообщений: 12
	12.11.2014, 13:56 [ТС]
	Насчет нового тега не травите =) Косячу еще, просто не мог понять как их по разным краям раскидать, но разобрался. Но приподнять текст или опустить картинку никак не получается. PS Каждую картинку текст засунул в отдельный div Добавлено через 3 минуты Я конечно понимаю, что можно сделать новую картинку, залепить на нее текст и вставить картинку с уже готовым текстом в документ. Но уже принципиально хочется разобраться как править такие штуки. Добавлено через 7 минут Спасибо за новое слово Валидатор - забил в интеренете хоть узнал что это такое, ввел свою страницу...Обомлел от ужаса =) А выглядит нормально вроде. Но ошибок он насобирал конечно...Большое спасибо - правда. 0

@Culesso 0 / 0 / 0 Регистрация: 12.11.2014 Сообщений: 12
	12.11.2014, 14:20 [ТС]
	Круто конечно =) Спасибо. Даже css не нужен =) Так и не понял за счет чего это происходит, но потом разберусь =) Добавлено через 1 минуту Я так понимаю, что могу удалить настройки для p в css файле и просто сделать float:right или float:left. Мде...=)Все гораздо проще оказалось 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.11.2014, 14:26
	Иногда приходится опускать картинки вниз, когда высота иконки меньше высоты блока с текстом... Это делается с помощью padding - внутренних отступов... В Вашем случае высота иконки равна высоте блока с текстом - поэтому получилось нормально... float(это и есть свойство css )- служит для выравнивания элементов по левому или по правому краю... А можно сделать бэкграундом, если интересно могу наверстать.. 0

@Culesso 0 / 0 / 0 Регистрация: 12.11.2014 Сообщений: 12
	12.11.2014, 14:28 [ТС]
	Я понял, вы картинку просто уменьшили =) Поэтому она примерно туда и попала. Это конечно тоже вариант, но все таки - неужели невозможно прописать как-то настройки положения текста на экране? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.11.2014, 14:31
	Можно всё... Опять же с помощью padding(например если хотите текст поднять пишите свойство padding-bottom, а если опустить свойство padding-top)... И кстати, для иконки в фотошопе можно сделать тримминг и прозрачный фон, тогда вообще идеально... 0

@Culesso 0 / 0 / 0 Регистрация: 12.11.2014 Сообщений: 12
	12.11.2014, 14:34 [ТС]
	Если можно по скайпу пообщаться, я был бы рад. Я бы оплатил работу почасово или как у вас программистов принято. alex_perspecto skype А вообще я по правде говоря так и не понял как произошло изменение =) Я прост оразмер стрелки поменю наверное и все. Будет примерно так как надо. Padding же вроде в самом HTML прописывается, во всяком случае вчера я так делал, а у Вас не прописано ничего и вышло как раз как надо. Я вставил один в один как у Вас - получил свой первый результат, даже при том, что удалил все настройки в CSS для положения на экране. Верстать не надо - я хочу сам сделать =) Уже принципиально надо идти до конца. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.11.2014, 14:37
	Пообщаться по скайпу можно, но только вечером... Работа...))) Часиков в 9 можно поговорить... 0

@brain-4-me 162 / 150 / 97 Регистрация: 24.12.2013 Сообщений: 744 Записей в блоге: 12
	12.11.2014, 14:41
	Culesso, молодец, так и надо, только без помощи не обойтись, потому что все под стандарт загнать нельзя) везде надо что то додумывать придумывать 0

@Culesso 0 / 0 / 0 Регистрация: 12.11.2014 Сообщений: 12
	12.11.2014, 14:44 [ТС]
	Ладно - проехали. Не хватает мозгов видать. Я в firebud все варианты перепробовал в макете Padding - право/лево перемещается и текст и картинка а верх/низ ну никак. Просто желтая полоса над ней увеличивается/уменьшается. Сделаю картинку с текстом и вставлю ее, или стрелку обрежу немного, чтобы визуально лучше выглядело. Спасибо всем за помощь. 0

@Culesso 0 / 0 / 0 Регистрация: 12.11.2014 Сообщений: 12
	12.11.2014, 15:00 [ТС]
	http://dropmefiles.com/zYD5h Вот что получилось =) padding bottom добавил в css для b но даже меняя значение текст не смещается относительно картинки. Добавлено через 8 минут Site Novizna.rar Вот тут лежит, с той ссылкой напутал =) 0

Выравнивание картинки относительно текста, CSS

Решение