【问题标题】:margin: auto property in CSS3边距:CSS3 中的自动属性
【发布时间】:2013-06-11 18:28:56
【问题描述】:

我的部分 HTML-5 代码:

<header id="main">
    <a href="#" id="exit"></a>
    <a href="http://www.reddit.com/" id="reddit"></a>
    <a href="http://www.stackoverflow.com/" id="stackoverflow"></a>
    <a href="http://www.facebook.com/" id="facebook"></a>
    <a href="#" id="title"></a> 
</header>

CSS-3 代码:

#main{
    height: 220px;
    width: auto;
    border: 2px #000000 solid;
}

#title{
    float: left;
    background: url(title.jpg) no-repeat;
    padding: 90px 145px;
    margin: 20px auto;
    border: 2px #000000 solid;
}

我在这两个 ID 上都设置了边框,以便更易于可视化。我不知道为什么我的标题图像没有居中。从上面的代码看是这样的:

这里是 JSFiddle:http://jsfiddle.net/5nWag/2/

【问题讨论】:

  • 这与 HTML5 和 CSS3 无关,正在删除那些标签
  • @Nilzone- 你能给我们提供更多的 CSS 吗?或使用JsFiddle ..
  • @CTravel 如果你想看看,我已经发布了 JsFiddle。

标签: html css margin padding


【解决方案1】:

标题图片未居中,因为您使用的是float: left;,我认为您将其用于id="exit"
尝试使用position: absolute; 将facebook、stack、red 放入div。接下来为退出做同样的事情。

这应该是你的主图像的风格。

background: url(title.jpg) no-repeat;
padding: 90px 145px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 20px;
border: 2px #000000 solid;

【讨论】:

  • 我试试这个 - 谢谢。不过有一个问题:margin: 0 auto 将 top 和 bottom 设置为 0,将 left 和 right 设置为 auto。为什么将 margin-bottom 和 margin-top 设置为 20px?
猜你喜欢
  • 1970-01-01
  • 2012-06-09
  • 2014-10-07
  • 2018-08-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-02-28
  • 1970-01-01
相关资源
最近更新 更多