页眉和页脚之间的中心内容区域

时间:2014-02-18 17:33:16

标签: html css templates center

问题:我试图让我的{{TEXT}}或“.acton”部分始终保持在页面正文中以及页脚和页眉之间的中心位置。

我正在使用此模板在名为ACT-ON的营销自动化软件中构建登录页面。因此,希望无论我们能为身体内容保持中心所做的任何修复都需要。

这是我的jsfiddle: http://jsfiddle.net/misterizzo/dMu79/

    <body>
<div id="bg">
   <img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
 <div id="header">
  <div id="top-left"><a href="http://medata.com/"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo"></a>
  </div>

    <div id="nav">
    <ul>
        <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Solutions</a>
            </span>
        </li>
        <li><a href="#"><span class="button">About Us</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Home</a>
            </span>
        </li>
    </ul>
    </div>

<div class="acton">
{{TEXT}}
</div>

<div id="footer">
<ul>
        <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Solutions</a>
            </span>
        </li>
        <li><a href="#"><span class="button">About Us</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Home</a>
            </span>
        </li>
    </ul>
</div>
</div>



</div>
</body>

希望这是我在这个模板上的最后一个问题。 到目前为止,我真诚地感谢大家的帮助!

4 个答案:

答案 0 :(得分:1)

如果你的HTML有效并且需要所需的结构,你可以轻松地使用显示:table,table-row/table-cell属性以及:vertical-align:middle;

重置CSS应该加载到你自己的CSS前面,它也会避免使用!important。

// comment //不是CSS中的有效评论,但/* comment */是。

http://jsfiddle.net/dMu79/7/

基本上结构是:

<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>

答案 1 :(得分:0)

这是一个可能适合您的解决方案:

<强> Demo Fiddle

CSS:

.acton {
    width: 900px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    top: 106px;
}

答案 2 :(得分:0)

您的HTML在某些地方被破坏,并且错过了结束div。我已在 Fiddle 中修复了此问题,更新后的代码如下:

 <div id="header">
      <div id="top-left">
           <a href="http://medata.com/"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo"></a>
       </div>

      <div id="nav">
           <ul>
                <li>
                     <a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</span></a>
                </li>
                <!-- the closing span's were after the closing A -->
                ...
           </ul>
      </div>
 </div> <!-- this div was missing -->

答案 3 :(得分:0)

我通过在.action部分设置一个上边距来修复它。

我也删除了位置右侧和左侧位置

请注意,margin-top设置为40%。这是因为它考虑了导航和页脚。您可以使用边距,具体取决于在其上方或下方添加的其他内容。

工作jsfiddle

http://jsfiddle.net/dMu79/9/

.acton {
    width: 900px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40%;
    text-align: center;
}