CODEWITHSUNDEEP
css
mrdan
mrdan

Reputation: 59

Image padding beside text

I'm trying to allign two images on each side of the text using padding.

I works on the left side but not on the right.

Why will the right one dont fall down 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; 
}

fiddle: http://jsfiddle.net/vvDdR/1/

Upvotes: 0

Views: 76

Answers (4)

misterManSam
misterManSam

Reputation: 24692

This should be made with background images in CSS.

As an example:

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

Fiddle screenshot

With a different typeface, this could also be achieved without images.

Upvotes: 2

emerson.marini
emerson.marini

Reputation: 9348

I would go with vertical-align:

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

Demo

MDN Documentation

Upvotes: 1

Etheryte
Etheryte

Reputation: 25310

Your current code won't work due to a simple typo.
The following does, given I understood your problem correctly.

Jsfiddle sample

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

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 77956

Instead of using vertical margin or padding you can just nudge it: 

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

Before:

Before

After

After

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

Upvotes: 2

Related Questions