Align image in text without problems in line-height (smilies in chatbox)
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>
加载中,请稍侯......
精彩评论