使用 CSS HTML 右对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5214893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
right align an image using CSS HTML
提问by unixman83
How can I right-align an image using CSS.
如何使用 CSS 右对齐图像。
I do notwant the text to wrap-aroundthe image. I want the right aligned image to be on a line by itself.
我不想要文字到wrap-around图像。我希望右对齐的图像本身在一条线上。
回答by alex
回答by jeffszusz
Float the image right, which will at firstcause your text to wrap around it.
向右浮动图像，这首先会导致您的文本环绕它。
Then whatever the very nextelement is, set it to { clear: right; } and everything will stop wrapping around the image.
然后无论下一个元素是什么，将其设置为 { clear: right; 一切都将停止环绕图像。
回答by Misty Lackie
There are a few different ways to do this but following is a quick sample of one way.
有几种不同的方法可以做到这一点，但以下是一种方法的快速示例。
<img src="yourimage.jpg" style="float:right" /><div style="clear:both">Your text here.</div>
I used inline styles for this sample but you can easily place these in a stylesheet and reference the class or id.
我在此示例中使用了内联样式，但您可以轻松地将它们放在样式表中并引用类或 ID。
回答by Sweet_Cherry
To make the image move right:
要使图像向右移动：
float: right;
To make the text not wrapped:
要使文本不换行：
clear: right;
For best practice, put the css code in your stylesheets file. Once you add more code, it will look messy and hard to edit.
为获得最佳实践，请将 css 代码放在您的样式表文件中。一旦你添加了更多的代码，它就会看起来很凌乱并且难以编辑。
回答by snaphuman
My workaround for this issue was to set display: inlineto the image element.
With this, your image and text will be aligned to the right if you set text-align: rightfrom a parent container.
我对此问题的解决方法是设置display: inline为图像元素。有了这个，如果您text-align: right从父容器设置，您的图像和文本将向右对齐。
