Question

我有一个标题和菜单栏，我已经修复它以保持在页面的顶部，所以当有人滚动页面或其他东西时，菜单和标题就在那里。

我的问题是关于页面的内容/正文。我尝试使用从顶部向下150 px的绝对定位（菜单和标题是125px），我希望在页面顶部的两个之间有25px。

然而，它改为位于页面的左侧，但我希望它以流畅的方式居中。

我也试过给出150px的上限，但由于某种原因这不起作用。

如何将其水平居中，但从顶部垂直至少150px？

以下是一些代码。

如果您需要更直观的内容，可以查看我的测试网站http://sunnahmatch.com，了解目前正在进行的操作。

编辑我的垂直间距向下。现在，如果我能弄清楚如何居中呢？：/

<style type="text/css">
body{
    margin:0;
    background-color:#333;
    }
#body_container{
    position:absolute;
    top:150px;
    padding:15px;
    margin:0 auto;
    width:70%;
    }
#left_container{
    float: left;
    width: 63%;
    padding:5px;
    margin-right:15px;
    background-color:#069;
    -moz-border-radius-topleft: 15px 15px;
    -moz-border-radius-bottomright: 15px 15px;
    border-top-left-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;
    }
#right_container{
    float:left;
    width: 31%;
    padding:5px;
    background-color:#069;
    -moz-border-radius-topleft: 15px 15px;
    -moz-border-radius-bottomright: 15px 15px;
    border-top-left-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;
    }
.column_left_tmpl{
    background-color:#FFF;
    padding:10px;
    -moz-border-radius-topleft: 10px 10px;
    -moz-border-radius-bottomright: 10px 10px;
    border-top-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    font-family: GeosansLight;
    font-size: 16px;
    }
.column_right_tmpl{
    background-color:#FFF;
    padding:8px;
    -moz-border-radius-topleft: 10px 10px;
    -moz-border-radius-bottomright: 10px 10px;
    border-top-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    font-family: GeosansLight;
    font-size: 16px;#59C169
    }
.title {
    width:100% auto;
    padding-top:5px;
    margin-bottom:5px;
    -moz-border-radius-topleft: 5px 5px;
    -moz-border-radius-bottomright: 5px 5px;
    border-top-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    font-family: Arial, Gadget, sans-serif;
    font-size:22px;
    color:#333;
    font-weight: bold;
    }
.spacer{
    height:5px;
    }
#menu_container{
    margin:0;
    position:fixed;
    top:0;
    left:0;}    
</style>

<body>
<div id="menu_container">
<?php include_once "pages/header.php" ?>
</div>
<div id="body_container">
    <div id="left_container">
      <div class="column_left_tmpl">
        <div class="title">Title</div>
      &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;
        </div>
        <div class="spacer">
        </div>
    <div class="column_left_tmpl">&quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;
    </div>   
    </div>
    <div id="right_container">
      <div class="column_right_tmpl">
        <div class="title">Title</div>
      &quot;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&quot;
        </div>
    </div>
</div>
<div>
<?php include_once "pages/footer.php" ?>
</div>

Answer 1

<击> 您的CSS没有任何问题，您的文档只是缺少Doctype。将<!DOCTYPE html>添加到文档顶部。或者<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">用于XHTML 1.1。

另外一条建议是将整个内容包装在html标记中，并将style标记放在head标记
中
所以你最终会得到这样的东西：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* more stuff here */ <div> </div> </body> </html>

<击>

style标记之外有head个元素。首先将其放在head标签内。然后更改body_container的CSS：删除position:absolute并将边距更改为margin: 150px auto 0 auto;。

#body_container{ /* position:absolute; */ /* removed */ top:150px; padding:15px; /*margin:0 auto;*/ margin: 150px auto 0 auto; /* changed */ width:70%; }

Answer 2

您可以尝试为 div 设置特定宽度，并将 margin-left 和 margin-right 设置为 auto 。这将自动居中 div 。

尝试按照本教程，它正在查看同样的问题。 Centering a DIV

Answer 3

....和<html>以及<head>和<title>

考虑使用验证服务？

固定菜单的问题

3 个答案: