Выровняйте изображение в тексте без проблем по высоте строки (смайлики в чате) - PullRequest
Новая
       3

Выровняйте изображение в тексте без проблем по высоте строки (смайлики в чате)

0 голосов
/ 19 августа 2010

Когда я помещаю смайлик (изображение, выравнивание по вертикали: середина, высота 15 пикселей) размером 15 пикселей в текст с высотой строки 17 пикселей, все в порядке.Но когда я делаю линии 16px, смайлик может изменить высоту строки.

Это для простого чата, и действительно раздражает, что если вы набираете смайлик, он изменяет высоту строки.

Так, как я могу поместить смайлики без изменения высоты строки?

Ответы [ 2 ]

0 голосов
/ 19 августа 2010

установить границу 0 и поиск атрибута vspace, например здесь .

и затем попытайтесь поместить все это в контейнер div с выравниванием по центру по вертикали.

0 голосов
/ 19 августа 2010

Нет способа легко сделать это.Вам необходимо вытащить изображение из текстового поля (из его расчетной высоты строки) и поместить его поверх него.Есть много чего, что вам нужно сделать с помощью прокрутки и тому подобного, чтобы все выровнять.

Я бы сделал внешний div, содержащий div с этой строкой текста.убедитесь, что внешний div это позиция: относительная.затем вы можете добавить к внешнему div еще один div для каждого графического элемента и использовать положение: абсолютное с левым: ## px для выравнивания.

вы в основном игнорируете стандартный поток текста / изображений в браузерах, чтобы получить то, что выхочу.есть много работы, чтобы сделать это правильно.

РЕДАКТИРОВАТЬ:

Это может работать для вас: 

<html>
<head>
<title>Test</title>

<style>
.LineBox
{
    background-color:green;
    height: 17px;
    margin-bottom: 3px;
}
.WordSpan
{
    background-color:yellow;
    height: 17px;
    font-size: 17px;
    margin-right: 4px;
    float: left;
}
.WordSpan IMG
{
    width: 25px;
    height: 25px;
    margin-top: -8px;
}
.EndOfLine
{
    clear: both;
}
</style>

</head>
<body>

<div class="LineBox">
<div class="WordSpan">This</div>
<div class="WordSpan">is</div>
<div class="WordSpan">a</div>
<div class="WordSpan"><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></div>
<div class="WordSpan">test.</div>
<div class="EnfOfLine"></div>
</div>

<div class="LineBox">
<div class="WordSpan">This</div>
<div class="WordSpan">is</div>
<div class="WordSpan">a</div>
<div class="WordSpan"><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></div>
<div class="WordSpan">test,</div>
<div class="WordSpan">again.</div>
<div class="EnfOfLine"></div>
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...