CODEWITHSUNDEEP
htmlcss
Hobby99
Hobby99

Reputation: 703

Placing text next/top to image

I have several images in the footer, each having text next to it. The text is always next/bottom to the image but I wish that it is next/top to the image. Just as on this website footer: http://robin-akademie.de/#inhalt

How could I do this easily? I tried putting the text into a span/p tag and then use margin-bottom on the span/p but this does not work.

Here is my code that produces text to be next/bottom to the image. For Text1 I tried it with a span and margin the span 5px from bottom. But text does not react. Text does react on margin-left though.

HTML:

<div class="footer">
    <div class="footer_cnt">
        <a href="#"><image src="<?= base_url('media/images/robinblack.jpg'); ?>" /><span>Text1</span></a>
        <a href="#"><image src="<?= base_url('media/images/glocke.jpg'); ?>" />Text2</a>
    </div>
</div>

CSS:

.footer_cnt img{   
    margin: 0;
    padding: 0;
    height: 50px;
}
.footer_cnt img a{
    color: white;
    float: left;   
}
.footer_cnt span{
    margin-bottom: 5px;
}

Upvotes: 0

Views: 105

Answers (5)

Nikhil Patel
Nikhil Patel

Reputation: 1781

Make the following change :

.footer_cnt span{
    display:inline-block;
    height:50px;
    vertical-align:middle;
}

Also, change your HTML <image> tag to <img>.

JSFiddle

Upvotes: 0

noob
noob

Reputation: 641

Please check this http://jsfiddle.net/94G7g/21/ . Used line-height to align text. Also made little changes

Upvotes: 1

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

use

.footer_cnt img{ 
display: inline; 
}

Upvotes: 1

Jamie Hutber
Jamie Hutber

Reputation: 28126

Should be simple:

.footer_cnt img{   
    margin: 0;
    padding: 0;
    height: 50px;
    display: inline; //the important part of this :)
}

Upvotes: 1

KnowHowSolutions
KnowHowSolutions

Reputation: 680

Use firebug to inspect. You'll see that the other page has a fairly different html setup for their footer than what you have. Also the footer has a tall line-height, 32px.

Upvotes: 1

Related Questions