CODEWITHSUNDEEP
htmlcsscss-float
WomenInTech
WomenInTech

Reputation: 1141

CSS align image text

How can i align image to the left and some text to right top and some text on right bottom ? The parent div has a background image . 

<div id="parent" style="background: url(bg.jpg) repeat-x left top"> 
   <img src="a.png"> <!--align left-->
    "Some text A" <!-- align on right top -->
    "Some text B" <!-- align on right bottom -->
</div>

Thanks in advance :)

Upvotes: 1

Views: 1589

Answers (4)

Tschallacka
Tschallacka

Reputation: 28722

Look at this fiddle

http://jsfiddle.net/qMXZv/1/

<div id="parent" style="position:relative;width:300px;height:300px;background: url(http://wallpaperplus.org/wp-content/gallery/019-wallpaper-wallpaper-03/desktop-wallpaper-52.jpg) repeat-x left top"> 
   <img width=100 height=300 src="http://stichtingpani.nl/wp-content/uploads/2011/11/google_logo.jpg" align="left"> <!--align left-->
    <span style="position:absolute;top:10px;"> "Some text A"</span> <!-- align on right top -->
    <span style="position:absolute;bottom:10px;v-align:top;">"Some text B" </span><!-- align on right bottom -->
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

EDIT

I have updated the example

EDIT 2

What you need is to specify that your parent div is position:relative What this does is make all "absolute" positioned elements absolutely positioned to the container div, instead of the top right corner of the browser viewport.

Then specify a width and height of the container div so you take up the space you wish to take up. And you always know what you are working with.

Then on the text add span containers and position them absolutely to the top and to the bottom. That way it'll align to the top and the bottom.

The <img> tag needs the parameters align="left" to align to the left and the text flow to the right.

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Is it possible to alter your HTML a little bit? Something like this:

HTML

<div id="parent" style="background: url(bg.jpg) repeat-x left top"> 
    <div class="right">"Some text A" <!-- align on right top --></div>
    <div><img src="a.png"> <!--align left--></div>
    <div class="right">"Some text B" <!-- align on right bottom --></div>
</div>

CSS

.right {text-align: right;}

Fiddle: http://jsfiddle.net/4PTgj/

Or in case, if you want the text to have aligned within the image, then another slight change in the CSS:

#parent {position: relative;}
.right {text-align: right; position: absolute; bottom: 0; right: 0;}
.right:first-child {bottom: auto; top: 0;}​

Fiddle: http://jsfiddle.net/4PTgj/1/

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157314

You can try something like this : My Fiddle

Preview

enter image description here

CSS

.text1 {
position: relative;
    right: 0px;
    display: block;
}
.text2 {
position: relative;
    top: 20px;
    display: block;
}

HTML

<div id="parent" style="background: url("") repeat-x left top"> 
   <img src="http://upload.wikimedia.org/wikipedia/commons/1/19/Crystal_folder_image.png" style="float: left;"> <!--align left-->
    <span class="text1">"Some text A"</span> <!-- align on right top -->
    <span class="text2">"Some text B"</span> <!-- align on right bottom -->
</div>​

​

Upvotes: 3

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

You can try something like this,

<div id="parent" style="background: url(bg.jpg) repeat-x left top"> 
   <span style="float:right">"Some text A"</span>  <!-- align on right top -->
   <img src="http://static.adzerk.net/Advertisers/e395a21294854772970cdd37e15bbb78.png"> <!--align left-->

    <span style="float:right">"Some text B"</span> <!-- align on right bottom -->
</div>​

Demo: http://jsfiddle.net/kbpBK/1/

Upvotes: 0

Related Questions