分隔盒中的中心分隔框

我已將分隔符添加到EasyCareBath.com，並且除了「.footer_box」外，我可以正確使用分隔區，它不會居中。我添加了「左：15％」，當你把窗戶吹起來時，它不再對齊。我錯過了什麼，或者我對CSS做了太多事情？分隔盒中的中心分隔框

.footer_spacer { 
    height: 50px; 
} 
.footer_wrapper { 
    height: 375px; 
    background-color: #e6dccb; 
} 
.footer { 
    border-top: 10px solid #789E65; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6); 
    margin-top: 0px; 
    /*min-width: 1007px;*/ 
    height: 235px; 
    background-attachment: scroll; 
    background-image: url(../images_footer/footer_bg.png); 
    background-repeat: repeat-x; 
    background-position: center top; 
    position: relative; 
} 
.footer_box { 
    height: 236px; 
    width: 1007px; 
    /*position: relative;*/ 
} 
.footer_copyright { 
    width: 100%; 
    /* [disabled]height: 100px; */ 
    /*float: left;*/ 
    padding-top: 15px; 
    position: relative; 
    text-align: center; 
    word-spacing: normal; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: 100; 
    font-variant: normal; 
    text-transform: none; 
    color: #354245; 
} 
#footer_col_01 { 
    position:absolute; 
    left:11px; 
    top:3px; 
    width:164px; 
    /*height:230px;*/ 
    z-index:1; 
} 
#footer_col_02 { 
    position:absolute; 
    left:186px; 
    top:3px; 
    width:164px; 
    /*height:230px;*/ 
    z-index:1; 
} 
#footer_col_03 { 
    position:absolute; 
    left:361px; 
    top:3px; 
    width:164px; 
    /*height:230px;*/ 
    z-index:1; 
} 
#footer_col_04 { 
    position:absolute; 
    left:535px; 
    top:3px; 
    width:183px; 
    /*height:230px;*/ 
    z-index:1; 
} 
#footer_col_05 { 
    position:absolute; 
    left:728px; 
    top:3px; 
    width:265px; 
    /*height:230px;*/ 
    z-index:1; 
    font-size: 14px; 
} 
footer { 
    font-family: Arial, Helvetica, sans-serif; 
    color: #fff; 
    font-size: 11px; 
    float: left; 
    width: 100%; 
} 
footer a { 
    color: #FFF; 
    text-decoration: none; 
} 
footer a:hover { 
    color: #FFF; 
    text-decoration: underline; 
} 
footer h6 { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    font-weight: 500; 
    color: #00A1CC; 
    line-height: 46px; 
    /*margin-bottom: -2px;*/ 
} 
footer li { 
    line-height: 18px; 
    list-style-type: none; 
    margin-left: 12px; 
} 
.footer_img_center { 
    text-align: center; 
}

來源

2012-11-15 dgPehrson

未來，如果您將CSS標記在http://jsfiddle.net的jsfiddle中，通常可以獲得更快的幫助。 –

我不確定爲什麼這會被降低 - 似乎是一個合理的問題。也許是因爲你包含了即將過時的實際鏈接？無論哪種方式，似乎都是一個有效的問題，所以我會投票反對大規模的裁員。：/ – Dave

修復你的CSS如下：

.footer_box { 
    height: 236px; 
    margin: 0 auto; 
    position: relative; 
    width: 1007px; 
}

來源

2012-11-15 15:30:48 LittleSweetSeas

完美的作品！謝謝。 – dgPehrson

改變你.footer_box規則如下：

.footer_box { 
    height: 236px; 
    width: 1007px; 
    margin: 0 auto; 
    position: relative; 
    }

的margin: 0 auto;中心footer_box。

position: relative;使得它絕對定位的列基於footer_box而不是身體定位。

我一直很喜歡的附註/類比：想想把'auto'連接到連接到頁面邊緣的物品的那一側的橡皮筋......在這種情況下，'auto'在左邊和右邊，所以 - 如果從左側和右側拉出橡皮筋，無論屏幕大小如何，它總是居中。

來源

2012-11-15 15:30:29 Dave

你太棒了！它非常完美！我看到了類似的答案，但他們沒有在「保證金」中包括「頭寸：相對」，再次感謝！ – dgPehrson

這個答案是真實的 - 只是爲了增加它，你在技術上不需要在0之後的「px」 - 因爲0是0.不需要使用任何單位，看起來更乾淨。 – Andy

@Andy - yah - 'px'是不需要的 - 只是我從來沒有破過的一種習慣 - 我仍然喜歡'px'的外觀，但是我應該可能會破壞它。 :)（我會從答案中刪除它）謝謝。 – Dave

你在正確的軌道上：

.footer_box { 
    height: 236px; 
    width: 1007px; 
    position: relative; 
    margin: 0px auto; 
}

上的自動保證金左右將確保頁腳始終圍繞，不管是什麼屏幕尺寸是。

來源

2012-11-15 15:32:19

分隔盒中的中心分隔框

回答

相關問題