Question

此横幅居中，但我仍然想要左边的边距。我希望它在重新调整窗口大小后缩进，以便在较低分辨率和手机上看起来更好。

<div id="banner">
   <center>
      <a target="banner" href="index.html" >
        <img src="images/banner.jpg" border="0" alt="GamerZone Banner">
      </a>
   </center>
</div>

我想用css代替html中心。谢谢。自从我一周前开始学习HTML以来，我不确定该怎么做。你能不能告诉我该怎么做？

Answer 1

您可以在容器中添加填充，例如

#banner{
     padding:0 20px;
}
#banner img{
     display:block;
     margin:0 auto;
}

Answer 2

<强> 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>

希望这有效。 检查此jsfiddle： http://jsfiddle.net/ACuKe/1/

Answer 3

只需给这种风格以达到你所需要的，

div#banner
{
  margin:0 auto;
  height: 100px;    //your own height
  width: 100px;    //your own width
}

无论屏幕分辨率如何，这都将使div保持在中心位置。见here。

Answer 4

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

将元素的margin属性设置为“0 auto”（简称“margin-top：0; margin-right：auto; margin：bottom：0; margin-left：auto;”）加“text-align ：中心”

然后你可以给元素一个固定的“text-indent”（对于单行内容）或固定的“margin-left”。

如何居中横幅并保持保证金？

4 个答案: