Html 如何使横幅居中并保持边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15248985/
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 center a banner and keep margin?
提问by TheUnCola
This banner is centered but I still want a margin on the left. I want it to be indented after re-sizing the window so it looks better on lower resolutions and phones.
这个横幅居中，但我仍然想要左边的边距。我希望它在重新调整窗口大小后缩进，以便在较低分辨率和手机上看起来更好。
<div id="banner">
<center>
<a target="banner" href="index.html" >
<img src="images/banner.jpg" border="0" alt="GamerZone Banner">
</a>
</center>
</div>
I would like to use css instead of html center as well. Thanks. I wasn't sure how to do it really since I just started learning HTML a week ago. Could you possibly tell me what to try?
我也想使用 css 而不是 html 中心。谢谢。我不知道该怎么做，因为我一周前才开始学习 HTML。你能告诉我该尝试什么吗？
回答by Marc Lloyd
You could add padding to the container instead e.g.
您可以向容器添加填充，例如
#banner{
padding:0 20px;
}
#banner img{
display:block;
margin:0 auto;
}
回答by Hari krishnan
CSS:
CSS：
#banner{
width: 500px;
height: 300px;
margin:auto;
text-align:center; /*centers horizontally*/
line-height:300px; /*same as height and for centering vertically*/
}
<div id="banner">
<a target="banner" href="index.html" title="some">
<img src="images/banner.jpg" border="0" alt="GamerZone Banner">
</a>
</div>
Hope this works. check this jsfiddle:http://jsfiddle.net/ACuKe/1/
希望这有效。检查这个jsfiddle：http : //jsfiddle.net/ACuKe/1/
回答by Rohit416
回答by Herr_Schwabullek
<div id="banner" style="text-align:center; margin:0 auto;">
<a target="banner" href="index.html" style="display:block; text-indent:30px;"><img src="images/banner.jpg" border="0" alt="GamerZone Banner"></a></div>
Set the margin property of the element as "0 auto" (shorthand for "margin-top:0; margin-right:auto; margin:bottom:0; margin-left:auto;") plus "text-align:center".
将元素的边距属性设置为“0 auto”（“margin-top:0; margin-right:auto; margin:bottom:0; margin-left:auto;”的简写）加上“text-align:center” .
Then you can give the element a fixed "text-indent" (for single-line-content) or a fixed "margin-left".
然后你可以给元素一个固定的“文本缩进”（对于单行内容）或一个固定的“左边距”。
