Спозиционировать картинку в тексте

Irina11.86 · April 23, 2012

Привет народ,нужна помощь.........у меня не получатся вставить картинку в текст.

пример:

<html>

Имя пользователя (адрес электронной почты):<img src="http://static.panoramio.com/photos/small/70779155.jpg"> Пишите.....

жду твоего ответа).....

</html>

Нужно чтоб картинка с текстом сравнялась в HTML,желательно без подключения CSS.

Edited April 23, 2012 by Irina11.86

Vzor · April 23, 2012

Можно вот так, первое что пришло в голову. Возможно есть лучшие варианты.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Test</title>

 <style>
.xlink {
	display:block;
	float:left;
	padding-top:4px;
}
.xtext {
	float:left;
}
.xdlink { 
	background: url("http://static.panoramio.com/photos/small/70779155.jpg") 100% 4px no-repeat transparent;
	padding-right:84px;
	float:left;
}
</style>

</head><body> 

<!-- в этом случае без css попробовал подрезать картинку -->
<p>Имя пользователя (адрес электронной почты): <img src="http://s1.hostingkartinok.com/uploads/images/2012/04/677851d387ba35640213d18c7ebb3043.png" align="middle"> Пишите.....</p>

<!-- а тут с помощью css -->
<span class="xtext">Имя пользователя (адрес электронной почты):</span><img src="http://static.panoramio.com/photos/small/70779155.jpg" class="xlink">Пишите.....

<!-- можно задать картинку фоном -->
<p><div class="xdlink">Имя пользователя (адрес электронной почты):</div>Пишите.....</p>
</body>
</html>

jsfiddle.net/L8QGM/

Дело в том что высота вашей картинки больше высоты текстовой строки поэтому при выравнивании картинки без css атрибутом align она не встанет чётко в центре строки.

Edited April 23, 2012 by Vzor

Vzor · April 23, 2012

Вот ещё вариант но тоже с css

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Test</title>

</head><body> 

Имя пользователя (адрес электронной почты): 
<img src="http://static.panoramio.com/photos/small/70779155.jpg" style="vertical-align:-4px;"> 
Пишите.....

</body>
</html>

Irina11.86 · April 23, 2012

Большое спасибо,мне этот атрибут align="middle" хорошо помог.

Vzor · April 23, 2012

Я рад что смог вам помочь. И вот возможно пригодится.

Атрибут align задает выравнивание элемента относительно других элементов на странице или выравнивание внутри элемента. Но в зависимости от того, к какому элементу (тегу) он применяется его деиствие может отличатся.

Edited April 23, 2012 by Vzor

Irina11.86 · April 23, 2012

Я рад что смог вам помочь. И вот возможно пригодится.
Атрибут align задает выравнивание элемента относительно других элементов на странице или выравнивание внутри элемента. Но в зависимости от того, к какому элементу (тегу) он применяется его деиствие может отличатся.

Взяла на заметку.

Sign In

Спозиционировать картинку в тексте

Question

Irina11.86

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vzor

Link to comment

Share on other sites

Vzor

Link to comment

Share on other sites

Irina11.86

Link to comment

Share on other sites

Vzor

Link to comment

Share on other sites

Irina11.86

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information