html - 将浮点图像与另一个图像对齐

Question

我正在使用以下 html 代码:

    <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

问题是生成的代码图片如下图:

但是，我会得到此图中显示的结果，能够将图像稍微移动到背景图像上，并将文本居中放置在 float 图像的下方或上方，如下例所示:

Answer 1

添加clear:both到 <a>样式，您还可以将图像向右对齐并在顶部对齐以将其移动一点:

 <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