Как выровнять речевой пузырь с изображением

Question

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

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

Я добавил margin-left: 205px;, но это, кажется, не резать ..

пример: http://jsfiddle.net/fUway/1/

Answer 1

Вы могли бы быть лучше настройки выноски для display: relative; и управления top и left свойства расположите пузырь точно там, где вы хотите его на изображении:

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