图像浮动到右侧，而左侧没有文本或其他元素

Question

我希望下面的徽标与页面右侧对齐。我尝试添加float:right，但这会导致水平线在左侧环绕。我不希望任何其他东西占据垂直空间。

这是我的HTML

<header >
   <div>
      <img  style="margin-right:40px; padding-bottom:20px" src="./AddFiles/bamboo_logo.png" height="50">
      <br>
      <hr>
   </div>
</header>

Answer 1

您可以尝试将文字对齐添加到包含div :( Working jsFiddle）

的内容

<header>
   <div style="text-align:right;"> <!-- add this css, images are by default inline -->
      <img style="margin-right:40px; padding-bottom:20px" src="./AddFiles/bamboo_logo.png" height="50">
      <br>
      <hr>
   </div>
</header>