图片浮在右边，左边没有文字或其他元素

Question

I want the logo below to align with the right of the page. I've tried adding float:right , but that causes the horizontal line to wrap around on the left. I don't want anything else occupying the vertical space.

Here is my HTML

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

Answer 1

You can try adding text align to the containing 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>