如何對齊圖標？

Question

這是看起來如何的屏幕截圖如何將這些圖標與 h2 對齊？ 我希望它們在那些 h2 的左側，並且我還想增加它們的大小。 當然，如果可能的話，不要破壞我建立的布局。 我嘗試使用 float right，但我真的很難讓它們在我的 H2 左側看起來正確。 請幫忙！

 * { margin: 0; padding: 0; font-family: "Roboto", sans-serif; } #main-content { background-color: #000000; background-image: linear-gradient(147deg, #000000 0%, #04619f 74%); color: white; padding: 2%; } #header-content h1 { font-size: 70px; font-weight: 500; } #header-content p { font-size: 20px; font-weight: 500; opacity: 0.8; } #content-icons { opacity: 0.8; display: inline; } #content-icons i { float: left; font-size: 30px; line-height: 20px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/> <div class="row align-items-center" id="main-content"> <div class="col fade-in" id="header-content"> <h1>UK Bridging Loans</h1> <p>Your Bridging Finance Partner</p> </div> <div class="col float-right" id="content-icons"> <ul class="fa-ul"> <li> <span class="fa-li"><i class="far fa-building"></i></span> <h2>Commercial Bridging Loans</h2> <p> Find out more about our commercial bridging loans to fund your project here. </p> </li> <li> <span class="fa-li"><i class="fas fa-store-alt"></i></span> <h2>Secured Bridging Loans</h2> <p> Secured bridging loans are the most popular form, securing the loan against an existing property brings better interest rates and more interest from lenders. Find out more here. </p> </li> <li> <span class="fa-li"><i class="fas fa-warehouse"></i></span> <h2>Unsecured Bridging Loans</h2> <p> Unsecured bridging loans are harder to get hold of as banks normally insist on securing your loan against a property/asset of some kind. However, we are approved to offer this option to customers. Find out more here. </p> </li> </ul> </div> </div>

Answer 1

我建議使用彈性盒子。 將要顯示的所有內容包裝在一行中，並將 display 屬性分配給 flex。