在文本旁边的图像填充

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

我会选择vertical-align：

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

Demo

MDN Documentation

Answer 4

由于简单的拼写错误，您当前的代码将无效 鉴于我理解你的问题，以下情况确实如此。

Jsfiddle sample

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