中心内容区域

问题：我试图让我的{{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>

希望这是我在这个模板我已经建立最后的问题。我衷心感谢所有人的帮助！

来源

2014-02-18 Misterizzo

可以easely使用的显示器。

重置CSS应该加载到您自己的CSS前面，它也会避免使用！important。

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

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

basicly的结构是：

<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>

来源

2014-02-18 18:03:47

谢谢你为这个，这似乎工作迄今最好的！ – Misterizzo

这里是一个解决方案，它可以为你工作：

Demo Fiddle

CSS：

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

来源

2014-02-18 17:44:39 badAdviceGuy

你的HTML被打破地方和缺少右div。沿table,table-row/table-cell性的判定：vertical-align:middle;，如果你的HTML是有效的，并与所需的结构我在这个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 -->

来源

2014-02-18 17:51:41 DAC84

我通过设置缘顶部的.action部固定它。

此外，我除去位置偏右和位置左

注意，边距设定为40％。这是因为它需要考虑导航和页脚。您可以根据其上方或下方添加的其他内容播放边距。

工作的jsfiddle

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

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

来源

2014-02-18 18:15:17 wuno

中心内容区域

回答

相关问题