2014-07-11 4 views
0

패딩을 사용하여 텍스트의 양쪽에 두 개의 이미지를 정렬하려고합니다.텍스트 옆에 이미지 패딩

저는 왼쪽에서 작동하지만 오른쪽에서는 작동하지 않습니다.

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

+0

당신은 적절한 텍스트 태그에 텍스트를 포장한다 ... 할 것 더 쉽습니다. –

+0

그게 당신이 찾고있는가요? http : // jsfiddle.net/vvDdR/7/ – melancia

답변

2

대신 수직 마진이나 패딩을 사용하면 그냥 슬쩍 찌르다 수 있습니다

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

은 전에 :

Before

데모

After

후 : http://jsfiddle.net/5g4wt/

2

이것은 CSS에서 배경 이미지로 만들어 져야한다. 예를 들어

:

Have a Fiddle!

HTML

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

More information on semantic quotations in HTML5. 다른 서체와

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; 
} 

Fiddle screenshot

CSS,이 또한 without images을 달성 할 수있다.

+1

여분의 이미지를 코드에 추가하는 대신 시맨틱 마크 업을 사용하기 때문에이 제안에 대한 추가 보너스 소품 – derekerdmann

+0

유지 관리 및 재사용도 매우 쉽습니다. – misterManSam

0

간단한 오타로 인해 현재 코드가 작동하지 않습니다.
다음은 귀하의 문제를 올바르게 이해 한 경우에 해당합니다.

Jsfiddle sample

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

나는 vertical-align와 함께 갈 것입니다 :

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

Demo

MDN Documentation