个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 12:30:53 24 4
gpt4 key购买 nike

我遇到的问题与我的内容不居中有关....我已经阅读了所有内容并完成了我的逻辑告诉我的所有内容，但我看不到任何变化或结果...-还应该注意的是，当我开始在每一页的顶部使用时，这个问题就开始发生了，但也许我没有像我应该的那样为它腾出空间，所以它把其他一切都搞砸了……

编辑 我想我想做的是在我网站上每个页面的顶部创建一个大约 115 像素的空间，这样我可以使用 SSI 插入我的标题，其中包括我的菜单、 Logo 和一些社交链接，也许我做错了？

这是我的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>

最佳答案

好吧，您用于使 #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的第二个解决方案。如果展开视口(viewport)，您会看到元素现在位于屏幕的中央。请注意，如果您在服务器端插入的内容不是绝对定位的(或者更确切地说，将在文档流中)，则甚至不需要 margin-top:115px ，因为您添加的任何内容都会根据需要简单地将 .content 元素向下推。

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

关于css - 即使边距设置正确，内容也不居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18240126/

24 4 0
文章推荐： ios - 有符号整数，算术左移
文章推荐： javascript - JavaScript 代码中的语法错误
文章推荐： css - 下拉菜单落后于页面内容
文章推荐： Javascript new Image() 尺寸
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com