使用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

向右浮动图像,这将首先导致文本环绕它.

然后,无论下一个元素是什么,将其设置为{clear:right; 一切都将停止环绕图像.

Answer 3

使图像向右移动：

float: right;

要使文本不换行：

clear: right;

为了获得最佳实践，请将 CSS 代码放入样式表文件中。一旦添加更多代码，它就会显得混乱且难以编辑。

Answer 4

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

Answer 5

有几种不同的方法可以做到这一点,但以下是一种方法的快速示例.

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

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

Answer 6

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