HTML：居中集裝箱

-1

我正在致力於THIS網站。出於某種原因，儘管我使用了'margin：0px auto;'，但'title'和'container'不在頁面的中心。屬性。我幾乎100％肯定這是CSS內的東西，但我不知道什麼。HTML：居中集裝箱

CSS

.container { 
    margin: 0px auto; 
    width: 545px; 
    height: auto; 
} 

.title { 
    margin: 0px auto; 
    width: 600px; 
    height: auto; 
    text-align: center; 
} 

.elemento1 { 
    float: left; 
    width: 266; 
    height: auto; 
} 

.elemento2 { 
    float: right; 
    width: 266; 
    height: auto; 
} 

.foot { 
    clear: both; 
}

頭版

<div class="title"> 
<font size="20">WE LIKE TO PLAY FOOTBALL</font> 
</div> 

<div class="container"> 
<div class="elemento1"> 
<div class="wrap"> 
<div class="anim"> 
<p><a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a></p> 
</div> 
</div> 
</div> 

<div class="foot"> 
</div> 

<div class="elemento1"> 

<div class="wrap"> 
<div class="anim"> 
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a> 
</div> 
</div> 

<p> 
<div class="wrap"> 
<div class="anim"> 
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a> 
</div> 
</div> 
</p> 

<div class="wrap"> 
<div class="anim"> 
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a> 
</div> 
</div> 
</div> 


<div class="elemento2"> 


<div class="wrap"> 
<div class="anim2"> 
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a> 
</div> 
</div> 

<p> 
<div class="wrap"> 
<div class="anim2"> 
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a> 
</div> 
</div> 
</p> 

<div class="wrap"> 
<div class="anim2"> 
<a title="Edizione 2013" href="http://wordpressitis.altervista.org/edizione-2013/"><img alt="" src="http://wordpressitis.altervista.org/wp-content/uploads/2013/01/dividere-quadrato.jpg"/></a> 
</div> 
</div> 
</div> 

<div class="foot"> 
</div> 
</div>

來源

2013-02-01 Artur Ryszka

您可以包括相關的HTML標記（所以我們可以重現該問題），或許也修剪的CSS下降到只有*有關*位？爲我們提供幫助，使它變得方便和愉快。 – Jeroen

你總是可以知道哪些網站是使用工具書寫的，哪些是用手寫的。我會說，大約40％的標記和CSS是純粹的膨脹。 –

顯然不是因爲我自己寫了所有東西，除了讓圖片移動的類[SOURCE]（http://www.w3schools.com/css3/css3_transitions.asp）。我通常使用Notepad ++。這個特定的代碼是在wordpress「編輯器」中編寫的（它不提供任何格式選項）。 –

添加.wrap{margin:0 auto;}。並從這個班級中取下寬度。對我來說它有效。

來源

2013-02-01 11:54:33

它，因爲你的包裝類的，只是將其刪除:)

/編輯：或者至少從格「將其刪除內容「

來源

2013-02-01 11:53:00

我需要它，否則當廣場移動它留下未使用的間隔，其他廣場去取代。 –

爲什麼你在寬度和高度被刪除的地方標記了正確的答案？沒關係:) –

是的，但是這個職業必須保持在其位置上，否則其他方塊會移動。顯然，只是「包裝」圖像而不指定尺寸就足夠了，它會適應。然而我離開'高度'屬性只是爲了確保:) –

從刪除width:266px;和。

你的CSS

.wrap { 
    width: 266px; 
    height: 267px; 
}

來源

2013-02-01 11:53:16 Vucko

我看到你的整個代碼有一個小問題。第一個問題是因爲你的標題是「div class =」wrap clearfix「id =」inner-content「，它的寬度只有266px。所以如果你設法讓你的標題脫離它，那麼我認爲你應該能夠要解決的問題。

來源

2013-02-01 11:56:39 HawkEye

.wrap { 
margin: 0 auto; 
width: 545px; 
height: 267px; 
} 
should fix it

來源

2013-02-01 11:57:45

我假設你使用的是IE作爲其在谷歌Chrome和Firefox更好，但頁腳錯了地方。用你的腳沒有在上市的CSS。只要改變CSS中的.foot到頁腳（假設你使用HTML5）

頁腳{ 明確：既 }

你可能想看看瀏覽器的特定代碼（在這裏搜索或谷歌它）。火狐

來源

2013-02-01 12:16:45 ConfusedShark

嘗試把標題的div容器中的固定寬度在100％

來源

2013-02-01 13:55:29 frankItaly

HTML：居中集裝箱

回答

相關問題