我正在嘗試使用引導程式 5 垂直對齊 div 內的彈性專案。我嘗試了多種方法，但沒有任何運氣。我創建了一個 Stack Snippet，它準確地復制了我的問題。我猜這在 css 中是非常簡單的事情，我可以修復它，但到目前為止我沒有發現任何似乎有幫助的東西。它總是希望在 div 的上半部分對齊內容。
.like-and-comment{
display: flex;
justify-content: space-around;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
.like-and-comment:hover {
cursor: pointer;
}<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link href="/static/css/style.css" rel="stylesheet">
<script src="https://js.stripe.com/v3/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div>
The div below has a top and bottom black border. I want the content to center veritcally, but I can not figure out how.
</div>
<div class="like-and-comment">
<div class="d-flex align-items-center">
<p id="upvote" class="p-0">
<i id="upvote_icon" class="fas fa-arrow-up" style="color: gray;"><span id="upvote_badge" class="badge bg-secondary"></span></i>
</p>
<p id="downvote">
<i id="downvote_icon" class="fas fa-arrow-down" style="color: gray;"><span id="downvote_badge" class="badge bg-secondary"></span></i>
</p>
</div>
<p id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal">
<i class="fas fa-award"></i>
</p>
<div class="dropdown">
<p class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></p>
<ul class="dropdown-menu">
<p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal">
<i class="bi bi-signpost-2"> Cross Post</i>
</p>
<p id="copytoclipboard" class="dropdown-item">
<i class="bi bi-clipboard"> Copy Link</i>
</p>
<p id="save_post" class="dropdown-item">
<i id="save_post_icon"></i>
</p>
</ul>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>uj5u.com熱心網友回復：
這不是引導程式中的彈性類的問題。這些類適用于您的代碼。您已將圖示放在 p 標簽內，并且 p 正在獲取其默認邊距底部，因此圖示看起來與頂部對齊。通過 css 或使用 mb-0 類洗掉這些父 p 標簽的底部邊距，然后圖示將看起來垂直對齊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/429863.html