将浮动图像与另一个对齐

Question

I am working with the following html code:

    <div style="background-image: url('Images/banner-transparente.jpg');overflow:hidden;">
    <img src="../Images/A3_2.png" class="icones thumbnail img-circle" alt="A3" style="height:5%; width:5%;float:right;">
    <a href="#" style="float: right;" id="autenticacao">Autenticação: Kerberos </a>
    <img src="../Images/logo-trt-home.png" class="img-responsive">
</div>

JSFiddle

The problem is that the generated code image is as shown below:

However, I would get the result shown in this figure, with the ability to move a bit the image over the background image and center the text underneath or on top of my floating image, as in the example below:

Answer 1

Add clear:both to the <a> style, you may also margin-right and margin-top the image to shift it a little:

 <img src="http://s15.postimg.org/ra8y0o7az/A3_2.png" class="icones thumbnail img-circle" alt="A3" style="height:5%; width:5%;float:right; margin:20px 50px 0 0;">
 <a href="#" style="float: right;clear:both;" id="autenticacao">Autenticação: Kerberos </a>

JSFiddle