2008年1月9日 星期三

[CSS]如何將網誌版面置中

  • css法 [一]:
    將網誌內容以另一個"大"容器包起來,並將其屬性設定為左右自動及寬度即可,此寬度依內容寬度總合而定,並請注意,若內容中有設定margin請記得算進去並留個10px左右緩衝以免版面被擠亂掉。
#container
{
width:700px;
margin:0px auto;
text-align:left;
padding:15px;
}
並請於html的部分裡用
包起所有內容即可。
詳細作法及範例請參考以下網頁 -- Centering: Auto-width Margins
註:此法不適用於IE5及更舊的版本。
  • css法 [二]:若想要上下左右皆置中,可以參考以下網頁說明及Demo - Dead Centre
    其中關鍵css語法為:
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
text-align: center;
margin-top: -35px;
margin-left: -125px;
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}

2013/08/11 更新-> 更多更好的置中方式 :http://codepen.io/shshaw/full/gEiDt

【下列文章您可能也有興趣】

沒有留言: