如何使用 CSS 水平對齊卡片，頂部邊框相等？

Question

如何對齊display: inline-block cards with a equal top border, with CSS？

當您以整頁寬度打開以下代碼片段時，為什么每張卡片的頂部邊界不相等？ 我為每個.card元素使用了固定的高度和寬度，所以我希望它能對齊。

注意：我也嘗試過display: table-cell但后來我失去了它是流暢的並且卡片自動適應瀏覽器寬度的事實（我想保持每行自動數量的卡片，適合瀏覽器寬度，沒有水平滾動條）。

 #main { width: 100%; }.cell { display: inline-block; }.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }.card img { width: 15em; height: 20em; }.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }

 <div id="main"> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla blablabla</p> </div> </div> </div> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p> </div> </div> </div> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla blablabla</p> </div> </div> </div> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla</p> </div> </div> </div> </div>

Answer 1

 #main { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, 320px); justify-content: center; } .card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; } .card img { width: 15em; height: 20em; } .container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }

 <div id="main"> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla blablabla</p> </div> </div> </div> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p> </div> </div> </div> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla blablabla</p> </div> </div> </div> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla</p> </div> </div> </div> </div>

Answer 2

你的意思是圍繞這些線嗎？

 #main { display: flex; gap: 40px; flex-wrap: wrap; width: 100%; } .cell { display: inline-block; } .card { border: 1px solid black; width: 15em; height: 30em; } .card img { width: 15em; height: 20em; } .container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }

 <div id="main"> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla blablabla</p> </div> </div> </div> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p> </div> </div> </div> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla blablabla</p> </div> </div> </div> <div class="cell"> <div class="card"> <img src=""> <div class="container"> <h4><b>Abc</b></h4> <p>blablabla</p> </div> </div> </div> </div>

Answer 3

完全使用 flex 和 grid 超級容易。 Flex 有利於自我居中和調整。 網格將幫助我們獲得整個頁邊距和 alignment：

.container {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

您可以根據需要調整卡片的寬度和高度，還可以根據需要修改填充和文本 alignment。

PS：此外，如果您需要滾動條工作，請不要使用 flexbox。將其更改為grid ：

.card {
      display: flex;
     
    }

這是編碼塊。 將是我第一次如此看:)

 .container { display: grid; align-items: center; justify-content: center; height: 100%; }.card { display: grid; flex-direction: column; align-items: center; justify-content: center; width: 200px; height: 200px; background-color: lightblue; padding: 20px; text-align: center; }.topnav { white-space: nowrap; display: grid; grid-auto-flow: column; overflow-x: scroll; width: 20rem; }.topnav a, .topnav button { float: left; display: block; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }

 <div class="container"> <div class="twitter-card"> <p>Here is the card</p> <textarea cols="40" rows="10" ></textarea> <div class="topnav"> <button>BIST </button> <button>BIST Fav</button> <button>EMTIA </button> <button>Other</button> <button>Other</button> <button>Other </button> <button>Other </button> </div> </div> </div>

Answer 4

您可以將 vertical-align: middle 添加到您的單元格類中。

 .cell { display: inline-block; vertical-align: middle;}