如何對齊具有不同高度的項目？

Question

我不確定如何更好地描述它，所以：我有一個 12 列的網格。 每 6 列（2 個相同的圖標和 2 個不同高度的文本）。 有沒有辦法讓圖標按中心對齊，文本按相同高度？ 我能夠對齊圖標，但文本總是在不同的高度。

 .benefits .benefits_item { display: flex; justify-content: center; align-items: center; margin-top: 35px; min-height: 150px; } .benefits .benefits_item .benefits_round { display: flex; justify-content: center; align-items: center; margin-right: 25px; width: 116px; height: 116px; background: #1EACC7; border-radius: 50%; } .benefits .benefits_item .benefits_descr { width: 370px; font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 15px; color: #202020; } .benefits .benefits_item .benefits_descr span { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 17px; line-height: 25px; color: #1EACC7;

 <div class="row"> <div class="col-md-6"> <div class="benefits_item"> <div class="benefits_round"><img src="" alt="1" class="benefits_icon"></div> <div class="benefits_descr"><span>Lorem ipsum dolor sit ame</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum</div> </div> </div> <div class="col-md-6"> <div class="benefits_item"> <div class="benefits_round"><img src="" alt="2" class="benefits_icon"></div> <div class="benefits_descr"><span>Lorem ipsum</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum, malesuada vel ante. Donec ut odio augue. Integer a aliquet quam. Aenean ut enim ullamcorper, feugiat neque ac, pretium augue.</div> </div> </div> </div>

Answer 1

您可以將align-items-center添加到<div class="row"> -- Bootstrap 的行使用display: flex以便您可以在行上使用其他 flex 實用程序類

 :root { --color: #1EACC7; --iconSize: 6rem; } .benefits_round { height: var( --iconSize ); max-width: var( --iconSize ); min-width: var( --iconSize ); background-color: var( --color ); } .benefits_descr span { color: var( --color ) }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container-md"> <div class="row align-items-center"> <div class="col-sm-6"> <div class="d-flex justify-content-center align-items-center"> <div class="benefits_round rounded-circle me-4 d-flex justify-content-center align-items-center"> <img src="" alt="1"> </div> <div class="benefits_descr fw-light"> <span class="fs-5">Lorem ipsum dolor sit ame</span> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum </div> </div> </div> <div class="col-sm-6"> <div class="d-flex justify-content-center align-items-center"> <div class="benefits_round rounded-circle me-4 d-flex justify-content-center align-items-center"> <img src="" alt="2"> </div> <div class="benefits_descr fw-light"> <span class="fs-5">Lorem ipsum</span> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum, malesuada vel ante. Donec ut odio augue. Integer a aliquet quam. Aenean ut enim ullamcorper, feugiat neque ac, pretium augue. </div> </div> </div> </div> </div>