如何将语音气泡与图像对齐

时间:2013-07-23 22:09:10

标签: html css css3 css-transitions

我正在尝试将语音气泡与图像对齐,以使其看起来好像该角色试图说些什么。

我知道它不会是完美的,但我希望它是流畅的而不是绝对的,所以它在大屏幕显示器和笔记本电脑显示器上看起来也是一样的。

我添加了margin-left: 205px;,但这似乎没有削减它..

示例:http://jsfiddle.net/fUway/1/

1 个答案:

答案 0 :(得分:0)

您可能最好将讲话气泡设置为display: relative;并控制topleft属性,以便将气泡准确定位在图像上您想要的位置:

<blockquote class="oval-thought" style="position: relative; top: 250px; left: 150px;"><p>yay</p></blockquote>
<img src="http://th00.deviantart.net/fs70/PRE/f/2010/310/7/4/super_sonic_sa2_by_mephilez-d329bcu.png" height="600" width="400"/>