使用CSS在網頁中心對齊照片（帶字幕）

我想在我的網頁上創建一個照片塊（其中有一個設置寬度，我沒有將該部分代碼複製過來）。我已將代碼放入下面的JSFiddle鏈接中。使用CSS在網頁中心對齊照片（帶字幕）

我將重新什麼，我試圖在圖形編輯器做。點擊這裏查看它：http://www.flickr.com/photos/adpartners/6630840127/in/photostream

我不知道我在做什麼錯我的CSS/HTML。一切都停留在左邊，因爲我在我的一個div標籤中使用了float。我真的希望背景能夠居中，就是這樣，然後將圖像放在頂部，就像這樣：3張照片，2張照片，1張照片，2張照片。他們都會鏈接到YouTube視頻，我已經獲得了該部分的鏈接。

任何幫助將不勝感激。我已經完成了10-20個不同版本的代碼，其中
p，div，table，ol/li標籤，並且誠實地不知道現在使用哪一個。

如果您看到我在做什麼錯了，請填寫。我在損失代碼！

非常感謝您可能提供的任何幫助， [R

來源

2012-01-03 user1128730

使用display: inline-block和text-align: center代替。

div.floatingPic { display: inline-block; padding: 12px; } 

div.containerVid { border: 2px solid #99cc99; 
        background-color: #000000; 
        padding: 45px; 
        height: 890px; 
        border-radius: 10px; 
        margin-bottom: 25px; 
        text-align: center; }

只要.containerVid足夠寬，圖像將繼續堆積，直到他們不再適合的排。如果您想盡早強制休息，只需添加一個<br />（就像您一直在做的那樣）。

小提琴：http://jsfiddle.net/T2qHR/20/

來源

2012-01-03 23:09:28 benesch

非常感謝您的有用評論！它神奇地工作！你真了不起！ – user1128730 2012-01-04 16:57:05

沒問題！如果你滿意，你會介意接受答案嗎？（只需點擊左側的複選標記。）它給了我一個不錯的小聲望提升。謝謝！：D – benesch 2012-01-04 20:22:58

當然，再次感謝！ – user1128730 2012-01-04 23:39:05

使用CSS在網頁中心對齊照片（帶字幕）

回答

相關問題