使用CSS HTML右对齐图像

Question

如何使用CSS右对齐图像。

我不希望文字到wrap-around图片。我希望右对齐的图像本身就在一条线上。

Answer 1

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
   ...text...
</div>    

jsFiddle

Answer 2

将图像向右浮动，首先会导致文字环绕。

然后无论 next 元素是什么，将其设置为{clear：right;一切都将停止环绕图像。

Answer 3

有几种不同的方法可以做到这一点，但以下是单向快速示例。

<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>

我为此示例使用了内联样式，但您可以轻松地将它们放在样式表中并引用类或ID。

Answer 4

 img {
     display: block;
     margin-left: auto;
   }

Answer 5

使图像向右移动：

float: right;

要使文字不被包裹：

clear: right;

为了获得最佳实践，请将css代码放在样式表文件中。一旦你添加了更多的代码，它将看起来很混乱，很难编辑。

Answer 6

我针对此问题的解决方法是将display: inline设置为图像元素。 这样，如果您从父容器设置text-align: right，则图像和文本将向右对齐。