CODEWITHSUNDEEP
htmlcss
amitsalyan
amitsalyan

Reputation: 678

<a><img></a> Make text appear after the image using CSS

<a id="logon_findaP" href="javascript:findA()">Find A
    <img id="img_logon_finda" align="right" src="/mobile/Images/findA.png" alt="Find A">
</a>

Above is an image with anchor tag and it displays text first, image later.

Is there a way using CSS and make it display image first and text later aligned vertically?

Upvotes: 0

Views: 1430

Answers (3)

DivideByZero
DivideByZero

Reputation: 545

http://jsfiddle.net/nj33n3o6/

Use float: left on the img.

#logon_findaP #img_logon_finda {
    float: left;
}

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You can use following CSS rules.

#logon_findaP {
   text-align: right;
} 

#img_logon_finda {
 float : left !important; 
}
<a id="logon_findaP" href="javascript:findA()">Find A
    <img id="img_logon_finda" src="https://www.gravatar.com/avatar/0241f873cfe31b997225d46d066e6bce?s=48&d=identicon&r=PG" alt="Find A">
</a>

Upvotes: 3

rrk
rrk

Reputation: 15846

#img_logon_finda {
  text-align: left;
  float:left;
}
#img_logon_finda:after {
    content:'';
    display:block;
    clear: both;
}
<a id="logon_findaP" href="javascript:findA()">Find A
    <img id="img_logon_finda" src="https://www.gravatar.com/avatar/0241f873cfe31b997225d46d066e6bce?s=48&d=identicon&r=PG" alt="Find A">
</a>

Upvotes: 0

Related Questions