Заполнение изображения рядом с текстом

Question

Я пытаюсь привязать два изображения по обе стороны от текста с помощью прокладки.

Я работаю с левой стороны, но не справа.

Почему правый не падает 10px?

HTML:

<img class="q1" src="http://i62.tinypic.com/2dkh7p2.png"/> 
This is the quoted text, but how can I get the right img to align? Right now it's too high! ---> 
<img class="q2" src="http://i62.tinypic.com/282f3mr.png" /> 

CSS:

.q1 { 
padding-right:2px; 
padding-bottom:10px; 
} 
.q2 { 
padding-left:2px; 
margin-top:10px; 
} 

скрипку: http://jsfiddle.net/vvDdR/1/

Answer 1

Вместо использования вертикального поля или отступы вы можете просто подталкивать его:

.q2 { 
    padding-left:2px; 
    position:relative; 
    top:10px; 
} 

До:

После

Демо: http://jsfiddle.net/5g4wt/

Answer 2

Это должно быть сделано с фоновыми изображениями в CSS.

В качестве примера:

Have a Fiddle!

HTML

<blockquote>This is an amazing quote - mistermansam</blockquote> 

More information on semantic quotations in HTML5.

CSS

blockquote { 
    background: url(http://i62.tinypic.com/2dkh7p2.png) no-repeat; 
    padding: 0 25px; 
    position: relative; 
    text-align: center; 
    width: 300px; 
} 
blockquote:after { 
    content:''; 
    background: url(http://i62.tinypic.com/282f3mr.png) no-repeat; 
    position: absolute; 
    height: 20px; 
    width: 20px; 
    display: block; 
    bottom: 0; 
    right: 0; 
} 

С другим шрифтом, это также может быть достигнуто without images.

Answer 3

Ваш текущий код не будет работать из-за простой опечатки.
Приведенное ниже, учитывая, что я правильно понял вашу проблему.

Jsfiddle sample

.q1 { 
    padding-right:2px; 
    padding-bottom:10px; 
} 
.q2 { 
    margin-top: 10px; 
    margin-bottom: -10px; 
} 

Answer 4

Я бы с vertical-align:

img { 
    display:inline;  
} 
.q1 { 
    vertical-align:45%; 
    margin-right:2px; 
} 
.q2 { 
    vertical-align:-70%; 
    margin-left:2px; 
} 

Demo

MDN Documentation