2012-12-18 51 views
2

我試圖在我的論壇上放置3件事:一組媒體鏈接左上角,右上方的菜單欄和下方的徽標。CSS對齊問題(float vs text-align)

使用這種方法,我的本地主機設置上看起來完全如此。但是,當我將它們上傳到我的實時網站時,它看起來不同?不同之處在於,徽標似乎將媒體框視爲其左邊距,而離線則忽略它並以頁面爲中心。同樣的瀏覽器,一切都是一樣的,這就是爲什麼它是如此莫名其妙。

#logo{ 
    display: block; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    } 


#brdmenu { 
    display: inline-block; 
    float: right; 
} 

#media { 
    display: inline-block; 
    float: left; 
    padding: 10px 10px 0px 10px; 
} 

我希望這不是垃圾,但完整的CSS(以及如何它看起來活的)可以在這裏看到:www.strengthandfitness.co.uk

+0

特別提示:logo上不需要'display:block','div'默認爲block-level。 – Purag

回答

1

的問題可能是在缺乏寬度#商標。更新後的代碼在Chrome/FF中適用於我:

#logo { 
    display: block; 
    text-align: center; 
    margin: 0 auto; 
    width: 650px; 
} 
+0

這就是訣竅,非常感謝! – user1911522

+0

沒問題,很高興幫助 - 只記得當你使用margin:0 auto來居中對象時,它需要一個寬度。 – MikeTedeschi