CSS 如何将div内的img向右对齐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3254595/
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
how to align img inside the div to the right?
提问by Linards
I would like to know how to align the image inside the div on the right side?
我想知道如何在右侧的 div 内对齐图像？
回答by Pekka
You can give the surrounding diva
你可以给周围div一个
text-align: right
this will leave white space to the left of the image. (= the image will occupy the whole line).
这将在图像左侧留下空白。（= 图像将占据整行）。
If you want content to be shown to the left hand side of the image, use
如果您希望内容显示在图像的左侧，请使用
float: right
on the image. However, the surrounding divwill then need overflow: autoto stretch to the needed height.
在图像上。但是，周围环境div将需要overflow: auto伸展到所需的高度。
回答by gillyb
<div style="width:300px; text-align:right;">
<img src="someimgage.gif">
</div>
回答by philip
<p>
<img style="float: right; margin: 0px 15px 15px 0px;" src="files/styles/large_hero_desktop_1x/public/headers/Kids%20on%20iPad%20 %202400x880.jpg?itok=PFa-MXyQ" width="100" />
Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci.
<br style="clear: both;" />
</p>
回答by DavidTaubmann
There are plenty of ways to align with CSS, each one has it's benefits and disadvantages, you could test them all to check which one fits your case better: http://www.w3schools.com/css/css_align.asp
有很多方法可以与 CSS 保持一致，每种方法都有其优点和缺点，您可以全部测试以检查哪一种更适合您的情况：http: //www.w3schools.com/css/css_align.asp
TIP:Always search using W3as extra word, that will give you in first places the resources of the W3school website or the w3.org if there's any relevant.
提示：始终使用W3作为附加词进行搜索，如果有任何相关内容，这将首先为您提供 W3school 网站或 w3.org 的资源。
回答by psychotik
vertical-align:middle; text-align:right;
vertical-align:middle; text-align:right;
回答by Sachin R
<style type="text/css">
>> .imgTop {
>> display: block;
>> text-align: right;
>> }
>> </style>
<img class="imgTop" src="imgName.gif" alt="image description" height="100" width="100">
