我的字体真棒图标卡在底部

Question

我想 position 垂直我的字体真棒图标，但我不能。 它应该看起来像一个圆圈，但图标在它的底部，它应该在中间。 我该怎么做呢？ 我搜索了一个解决方案，但没有一个对我有用。 :(

 .container { text-align: center; margin-top: 60px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }.flexing { display: flex; }.aboutus i { width: 150px; border-radius: 50%; background: whitesmoke; text-align: center; padding-top: 25%; font-size: 60px; color: grey; }.aboutus i:hover { background: lightgreen; color: white; transition: all 0.5s; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <h2>About us</h2> <hr> <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5> <section class="item flexing"> <div> <i class="fa fa-rocket" aria-hidden="true" ></i> <h3>Lorem ipsum</h3> <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p> </div> <div> <i class="fa fa-sun-o" aria-hidden="true"></i> <h3>Lorem ipsum</h3> <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p> </div> <div> <i class="fa fa-google-wallet" aria-hidden="true"></i> <h3>Lorem ipsum</h3> <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p> </div> <div> <i class="fa fa-trophy" aria-hidden="true"></i> <h3>Lorem ipsum</h3> <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p> </div> </section> <div class="item"> <div> <a href="#" >Learn more</a> </div> </div> </div>

Answer 1

您可以轻松使用这样的弹性功能，请在下面检查您编辑的 class：

 .container { text-align: center; margin-top: 60px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }.flexing { display: flex; }.flexing i { display: flex; width: 150px; height: 150px; border-radius: 50%; background: whitesmoke; align-items: center; justify-content: center; font-size: 60px; color: grey; }.flexing i:hover { background: lightgreen; color: white; transition: all 0.5s; }

 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <div class="container"> <h2>About us</h2> <hr> <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5> <section class="item flexing"> <div> <i class="fa fa-rocket" aria-hidden="true" ></i> <h3>Lorem ipsum</h3> <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p> </div> <div> <i class="fa fa-sun-o" aria-hidden="true"></i> <h3>Lorem ipsum</h3> <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p> </div> <div> <i class="fa fa-google-wallet" aria-hidden="true"></i> <h3>Lorem ipsum</h3> <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p> </div> <div> <i class="fa fa-trophy" aria-hidden="true"></i> <h3>Lorem ipsum</h3> <p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p> </div> </section> <div class="item"> <div> <a href="#" >Learn more</a> </div> </div> </div>