中心內容區域

問題：我試圖讓我的{{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

中心內容區域

回答

相關問題