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

有几种不同的方法可以做到这一点，但以下是一种方法的快速样本。

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

我用内嵌样式此示例，但你可以很容易地将这些在样式表和引用的类或ID。

Answer 3

浮动图像的权利，这将首先导致您的文字环绕它。

然后无论什么非常下一个元素是，将其设置为{清除：正确; }一切都将停止环绕图像。

Answer 4

为了使图像向右移动：

float: right; 

要使文本不换行：

clear: right; 

对于最佳实践，把CSS代码在你的样式表文件。一旦你添加了更多的代码，它会看起来很杂乱，很难编辑。