0

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

编辑我想我想做的是在我网站上每个页面的顶部创建一个大约 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>

4

1 回答 1

1

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

问题实际上在于元素的内容#centered——元素的样式.content。它是 given position:absolute，这意味着它被从布局中取出，因此 的定位#centered对其没有影响（因为#centered没有 have 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 演示。如果您展开视口，您会看到元素现在位于屏幕的中心。请注意，如果您在服务器端插入的内容不是绝对定位的（或者更确切地说，将在文档流中），margin-top:115px则甚至没有必要，因为您添加的任何内容都会简单地将.content元素向下推如所须。

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

于 2013-08-14T19:23:38.060 回答