Align image in text without problems in line-height (smilies in chatbox)_问答_开发者

Align image in text without problems in line-height (smilies in chatbox)

开发者 https://www.devze.com 2023-01-12 17:52 出处：网络

When I put a smilie (image, vertical-align: middle, 15px height) of 15px in a text with a line-height of 17px, everything is okay.

相关专题：css javascript

When I put a smilie (image, vertical-align: middle, 15px height) of 15px in a text with a line-height of 17px, everything is okay. But when i make the li开发者_JAVA百科nes 16px, a smilie can change the line-height.

Its for a simple chatbox, and it is really annoying that if you type a smilie it changes the line-height.

So how can i put smilies without them changing the line-height?

setup border to 0 and lookup for vspace attribute, like here.

and then try to put it all into div container with vertical centered align.

There is no way, easily, to do this. You need to pull the image out of the text box (out of its calculated line height) and place it on top of it. There is a lot you have to do with scrolling and whatnot to keep everything aligned.

I would make an outer div that contains a div with that line of text. make sure the outer div is position:relative. then you can add to the outer div another div for each graphic & use position:absolute with a left:##px to line things up.

your basically ignoring the browsers standard text/image flow to get what you want. there is a good bit of work to get it done right.

EDIT:

This might work for you:

<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>