中心內聯阻止列表

Question

如何在div內居中插入塊？ 當出現下一行時，在右邊有一個看不見的空白，我似乎無法擺脫。 我如何將其刪除？

https://gyazo.com/797bc2388bb1db8d6b474411478a57cb

我想將所有內聯代碼塊完全居中。

 .list { margin: 0px auto; height: 100%; width: 90%; background-color: gray; } .entry { display: inline-block; float: left; width: 225px; margin: 8px; box-shadow: 5px 5px 5px #888888; } 

 <div class="list"> <div class="entry"> <button class="title btn btn-primary">Full Metal Panic!</button> <div class="description">Seventeen-year-old Sousuke Sagara, a sergeant working for Mithril, has been assigned to protect Kaname Chidori. He is ordered to join her high school class and be as close to her as possible to prevent her from falling into enemy hands, that is, if he can safely blend in with their fellow classmates without revealing his true identity.</div> <img src="http://cdn.myanimelist.net/images/anime/2/75259.jpg"></img> <button class="info info-episodes btn btn-primary"> <div class="pull-left">EPISODES</div>24</button> <button class="info info-rating btn btn-warning"> <div class="pull-left">RATING</div>R</button> </div> </div> 

Answer 1

對於inline-block元素，可以使用text-align:center;它們垂直text-align:center;

關於邊距空間，當元素為內聯時，它會自動為段落上的空間元素（如跨度或鏈接）留出一個邊距。 這就是這種顯示的方式。

有一些解決方法可以修復該空白，例如將父級的font-size設置為0或將其font-size為-4px margin-right 。

一些解決方法在CSSTricks（ 與內聯塊元素之間的空間進行戰斗）中進行了說明。

盡管display:inline-block非常簡單，但有些建議您使用浮動元素來完善間距。 在這種情況下，如果保證金的事情不太麻煩，那就去吧。

有關您的代碼的一些信息：

• 嘗試將按鈕列表制作為...按鈕列表，將其包裝在ul li （用於圖像下方的按鈕），從語義上講是正確的，並且更易於樣式化；
• 盡量不要在BUTTON內使用DIV 。 按鈕顯示為內聯，而DIV顯示為塊，您可以使用SPAN來設置一些文本樣式。
• 由於描述是文本的段落，您可以將其包裝在P元素上，從語義上講會更好（SEO）

鋼筆