Question

我遇到了与我的内容无关的问题....我已经阅读了所有内容并完成了我的逻辑告诉我的一切，但我看到没有变化或结果...... - 还应该注意到，当我开始使用每个页面的顶部时，这个问题就开始发生了，但也许我没有为它做正确的空间，就像我应该这样，它已经搞砸了其他一切....

编辑我想我想要做的是在我网站的每个页面顶部创建一个大约115px的空间，这样我就可以使用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>

Answer 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元素。

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

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

1 个答案: