需要明確的是，我使用的是 Bootstrap 5，如果有本地實用程式可以引導執行此操作，我很感興趣，但也很高興應用一些 CSS 類/樣式！
例如，如果連續有 2 個按鈕，并且 2 個按鈕上的文本高度不同，我可以通過應用h-100兩個按鈕來避免按鈕具有不同的高度。我知道發生了什么，因為cols在一行內具有相同的高度，這個奇異的高度變數現在被轉移到兩個按鈕，所以兩個按鈕的高度相同。當應用 a 時，這在視覺上很明顯border。
<div class="row">
<div class="col-6">
<button class="btn btn-lg border border-primary w-100 h-100">Option A</button>
</div>
<div class="col-6">
<button class="btn btn-lg border border-primary w-100 h-100">Much more involved option</button>
</div>
</div>
我嘗試做同樣的事情，除了按鈕，使用<p>內容。我再次用bg-color視覺來表示正在發生的事情。我很高興無論文本的高度如何，陰影區域的高度都相同。
<div class="row">
<div class="col-6">
<p class="bg-secondary w-100 h-100">Text A</p>
</div>
<div class="col-6">
<p class="bg-secondary w-100 h-100">Much more involved text</p>
</div>
</div>
但是，我想添加的<p>示例缺少的是按鈕文本相對于總按鈕物件的高度垂直對齊。<button>即，文本Option A垂直放置在第一個按鈕的中心。
如何將較短的文本Text A垂直放置在陰影高度的中心？再次，很高興作為 Bootstrap 本機實用程式或其他 CSS 樣式得到答案。
請參閱此 Codeply，請在移動模式下查看我在說什么：https ://www.codeply.com/p/wpoarBKYoy
uj5u.com熱心網友回復：
您可以使用 Flexbox 來做到這一點。
嘗試像這樣align-items-center添加：<p>
<p class="bg-secondary d-flex align-items-center w-100 h-100">Text A</p>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/487674.html