1

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

    .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>

4

1 回答 1

3

您可以像这样轻松使用 flex 功能，请在下面检查您编辑的类：

.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>

于 2020-11-14T11:09:43.267 回答