Html 如何在右下角对齐图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13217981/
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 image in right bottom corner
提问by PAM
How to places image in page bottom right corner.
如何在页面右下角放置图像。
<div id="background-img" class="background-img" ></div>
.background-img{
background:url('images/bg-img.png');
width:100%;
height:698px;
repeat-x;
}
I created the background image with 1pximage. Now I have to I have to place company logo in page bottom right corner how to do this..
我用1px图像创建了背景图像。现在我必须将公司徽标放在页面右下角如何做到这一点..
Any suggestion and how to code this one.. Advances Thanks...
任何建议以及如何对此进行编码.. 进步谢谢...
回答by Lumiukko
You could use absolute positioning:
您可以使用绝对定位：
position: absolute;
right: 0px;
bottom: 0px;
回答by Mauno V?h?
You can use position: fixed; bottom: 0px; right: 0px;which makes sure that your company logo is always visible at bottom right corner - this means that page scrolling is not affecting its position.
您可以使用position: fixed; bottom: 0px; right: 0px;它确保您的公司徽标始终在右下角可见 - 这意味着页面滚动不会影响其位置。
or
或者
You can use position: absolute; bottom: 0px; right: 0px;which makes sure that your company logo is placed to a certain location and it is affected by the scrolling of the page.
您可以使用position: absolute; bottom: 0px; right: 0px;它来确保您的公司徽标放置在某个位置，并且它会受到页面滚动的影响。
I created a fiddle which demonstrates the differences, JsFiddle example
我创建了一个演示差异的小提琴，JsFiddle 示例
回答by Rachel Gallen
you could try this
你可以试试这个
<div class="outer">
<img src="....">
</div>
with
和
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
回答by Anoop
Use position fixed if you want your code to be positioned relative to window other wise ose position: absolute if you want it to position relative to document.
如果您希望代码相对于窗口定位，请使用 position fixed 否则 ose position: absolute 如果您希望它相对于文档定位。
Relative to screen:
相对于屏幕：
.background-img{
position:fixed;
right:10px;
bottom: 10px
}
Relative to document
相对于文档
.background-img{
position:absolute;
right:10px;
bottom: 10px
}
回答by user568021
I belive this should also do it:
我相信这也应该这样做：
.background-img
{
width:100%;
height:698px;
background: url('images/bg-img.png') repeat-x 0 0;
}
There's also a background-position css property.
还有一个 background-position css 属性。
.background-img
{
background:url('images/bg-img.png');
width:100%;
height:698px;
repeat-x;
background-position: bottom right;
}
