定心內容保證金：0汽車

以下是我的CSS代碼：定心內容保證金：0汽車

<style type="text/css"> 

body { 
    background-color:#FFF; 
    font-weight:bold; 
    font-size:12pt; 
    font-family:Arial,sans-serif; 
} 

.container { 
    width: 800px; 
    margin: 0 auto; 

} 

#header { 
    text-align: left; 
    padding-top: 220px; 
    font-size: 60pt; 

} 
#subheader { 
    text-align:left; 
    font-size: 15pt; 
    color: #666; 
    margin-top: -5px; 
    margin-bottom: 15px; 

} 

#email { 
    width: 165px; 
    height: 25px;  
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    text-align:center; 
    border: 2px solid; 
    color: #666; 
    border-color: black; 

} 
input[type=submit] { 
    height: 30px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background-color: #000; 
    border-color: #fff; 
    color: #fff; 
} 

#socialMedia { 
    padding-top: 60px; 
    text-align:center; 
} 
#video { 
    padding-left: 600px; 
    margin-top: -260px; 

} 
</style>

的HTML的div被劃分如下：

<div class="container"> 
<div id="header"> 
    <Content> 
</div> 
<div id="subheader"> 
    <Content> 
</div> 
<Form Input Field> 

<div id="video"> 

<Embedded Video> 
</div> 

<div id="socialMedia"> 
    <Social Media Image Links> 
</div> 

</div> 
</body> 
</html>

我與這個有問題的是，雖然該頁面嘗試以瀏覽器重新縮放爲中心，只有內容的左側正在調整。右側基本上掛在頁面的邊緣，因此不會居中。

有什麼建議嗎？我嘗試過使用Chrome。

來源

2012-05-26 Zack Tanner

這可能是問題：

#video { 
    padding-left: 600px; 
    margin-top: -260px; 

}

我不知道什麼大小視頻容器是可能的，但也許這就是爲什麼它不能與其他所有內容正確對中。

當你使用這個CSS代替時，會發生什麼？

#video { 
    text-align:right; 
    margin-top: -260px; 

}

也許我誤解了問題所在。你能發送這個問題的截圖嗎？

來源

2012-05-26 20:33:40 Matthew

嘗試在容器上設置一個最大寬度：

.container { 
    max-width: 800px; 
    margin: 0 auto; 
}

這裏有一個演示：http://jsfiddle.net/Ltf5U/

來源

2012-05-26 18:55:30 Fluidbyte

感謝您的迴應。嗯。這似乎沒有太大的影響。我能看到的最好的方法是將容器設置爲1250px。但是，當顯着擴大瀏覽器寬度時，頁面的最右側部分會有更多空白。有任何想法嗎？ –

根據你的解釋，'max-width'是我能想到的防止右手流血的唯一方法（用CSS）。 – Fluidbyte

定心內容保證金：0汽車

回答

相關問題