Question

我试图将图标居中，但只能垂直放置在其框内。我试过vertical-align：middle;但似乎不起作用。我也尝试了line-height方法，但是图标有一个外部边框，当它下降时，边框保持在顶部，因此看起来很拉伸。就像这样： enter image description here

我希望它看起来像这样：

enter image description here

我在youtube上观看了一些教程，它们使用display：flex和vertical-align，但是似乎没有任何效果！我真的很想了解它的一般运作方式... 这是我的html

<section id="stories">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                            <i class="fas fa-play"></i>
                    </div>
                    <div class="col-md-6">
                        <div class="successbox">
                            <h2>Success stories</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

和CSS：

#stories{
    background : url("http://demo.themefisher.com/educenter/images/backgrounds/success-story.jpg");
    padding: 60px 0px;
}
#stories i{
    font-size: 20px;
    color :#fff;
    background-color : #ffbc3b;
    padding:40px;
    border-radius: 100%;
    display: table-cell;
    vertical-align: middle;
}

Answer 1

尝试一下：

    .row {
    display: flex;
    align-items: center;
    }

使用flexbox可以为您提供很多FLEXiblity定位功能，您应该将其检出：

https://www.w3schools.com/css/css3_flexbox.asp

将图标垂直放置在其框内居中

1 个答案: