即使边距设置正确，内容也不居中答案

【问题标题】：content is not centered even with margins set correctly即使边距设置正确，内容也不居中
【发布时间】：2013-08-14 19:02:09
【问题描述】：

我遇到了与我的内容不居中有关的问题....我已阅读所有内容并已完成我的逻辑告诉我的所有内容，但我没有看到任何变化或结果... - 还应该注意的是，当我开始使用每个页面顶部的

编辑我想我想做的是在我网站上每个页面的顶部创建一个大约 115 像素的空间，所以我可以使用 SSI 插入包含我的菜单、徽标的标题还有一些社交链接，也许我说错了？

这是我的 CSS：

body{
font-family: sans-serif, times, serif;
margin:0px;
padding:0px;
padding-top:10px;
width:100%;
}

#centered{
width:900px;
height:auto;
margin:0px auto;
}
#menu{
position:relative;
top:0px;
left:0px;
}
.content{
background:none;
position:absolute;
margin:0px auto;
height:auto;
top:115px;
left:0px;
}
#feature img{
    position:relative;
    left:0px;
    top:0px;
    margin:0px;
    padding:0px;
    border:0px solid white;
    border-radius:2px;
}

div.centercolumn{
position:relative;
left:8px;
top:0px;
width:100%;
margin:8px;
}

p.mission,.impact{
    position:relative;
    left:0px;
    margin-top:0px;
    margin-bottom:8px;
    text-decoration:underline;
    font-weight:bold;
    text-align:center;
    font-style:italic;
    font-size:1.2em;
    max-width:900px;
    clear:both;
}

p.mission{
    padding-top:10px;
}

#programs{
    position:relative;
    left:2px;
    top:0px;
    float:left;
    padding-bottom:50px;
}

    .spread{
    padding:5px;
    margin:0px 12px

}

    span{
    opacity:0;
    -webkit-transition: opacity .5s;
    -moz-transition:    opacity .5s;
    -o-transition:      opacity .5s;
}

然后是我的html：

<body>
<div id="centered">
<div id="menu">
<!--#include virtual="/menus/menu.html" -->
</div>
<div class="content">
    <div id="feature">
        <img id="imagefeature" src="http://www.unifiedforuganda.com/resources/test%20homepage.jpg" alt="fall 2013 tour" />
    </div>
    <div class="centercolumn" id="programs">
        <p class="impact">Our Impact</p>
        <a href="#" class="imglink spread" id="mentorship" alt="Mentorship Program"><span></span></a>
        <a href="#" class="imglink spread" id="sponsorship" alt="Sponsorship Program"><span></span></a>
        <a href="#" class="imglink spread" id="scholarship" alt="Scholarship Program"><span></span></a>
        <p class="mission">Our Mission</p>
        <p class="promotiontext">We emotionally and financially support the most destitute children of northern Uganda through scholarship and mentorship.<br>U4U is student led organization that is registered as an official 501(c)3.</p>
    </div>
</div>

【问题讨论】：

我没有看到任何显示：块；或显示：内联块；在你的 CSS 中
@Keith 是正确的。您需要将display: block 分配给居中的div
注意<div>默认是块级元素； display:block 应该不是必需的。
嘿好吧....我看到了....似乎没有任何效果...这是网上更新的代码：unifiedforunifat.com/redesign/homepage.html
也许我应该问另一个问题：基本上我想在页面的主要内容上方创建一个空闲空间，以便当我使用 SSI 插入时，在主要内容上方有空间......这有意义吗？

标签： css ssi

【解决方案1】：

好吧，您用于使#centered 元素居中的 CSS 实际上是正确的！所以别担心，你在正确的轨道上。

问题实际上在于#centered 元素的内容——.content 元素的样式。它被赋予position:absolute，这意味着它被从布局中取出，因此#centered 的定位对其没有影响（因为#centered 没有position:relative）。

我现在可以看到有两种方法可以解决这个问题：首先，您可以将 position:relative 添加到 #centered 的定义中，因此您的 CSS 如下所示：

#centered {
    width:900px;
    height:auto;
    margin:0px auto;
    position:relative;
}

这将导致绝对定位的.content 相对于#centered 元素定位。或者（以及我更喜欢的方法），您可以删除.content 上的绝对定位，因为它似乎不需要在那里。删除一些其他不必要的属性并添加一个边距，它看起来像这样：

.content {
    margin-top:115px;
    background:none;
}

这是第二个解决方案的JSFiddle demonstration。如果您展开视口，您会看到元素现在位于屏幕的中心。请注意，如果您在服务器端插入的内容不是绝对定位的（或者更确切地说，将在文档流中），则 margin-top:115px 甚至不是必需的，因为您添加的任何内容都会简单地推送.content 元素根据需要向下。

如果这不是您想要的，请告诉我，我们很乐意为您提供进一步帮助。祝你好运！

【讨论】：

嘿，谢谢！我应该已经看到了....我上周刚开始学习 CSS，我担心这超出了我的范围，因为 SSI 但我绝对应该知道...谢谢！！！
太好了，很高兴我能帮上忙！ CSS 使用起来真的很有趣，但是有很多小规则需要记住。顶部的空间（我想是在横幅上方？）是由于top:115px 上的margin-top:115px 或.content 造成的（取决于您走的路线）。我把空格留在那里，因为你的 CSS 以前是这样写的，但如果你不再想要它，你可以删除那个特定的样式（在 top:115px 的情况下，替换为 top:0）。
嘿，是的，我明白了，谢谢，我正在阅读您回答的“肉”，然后回去阅读详细信息并拿起它，非常感谢！