html - 当我将一些图像与 CSS 并排对齐时，一个图像的水平位置不相等。如何解决这个问题呢？请

Question

当我将这些图像与 CSS 并排对齐时，第二个图像的水平位置不相等。如何解决这个问题呢？

我的 HTML 代码：

<div class="team-box">
    <div class="box">
        <div class="team-mem">
            <img src="resources/img/author.jpg" alt="flag" />
        </div>
        <h2>ANNE HATHAWAY</h2>
        <h3>CEO / Marketing Guru</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
            dolore magna.
        </p>
    </div>
    <div class="box">
        <div class="team-mem">
            <img src="resources/img/a1.jpg" alt="flag" />
        </div>
        <h2>Kate Upton</h2>
        <h3>Creative Director</h3>
        <p>
            Duis aute irure dolor in in voluptate velit esse cillum dolore fugiat nulla pariatur. Excepteur sint occaecat non
            diam proident.
        </p>
    </div>
    <div class="box">
        <div class="team-mem">
            <img src="resources/img/a2.jpg" alt="flag" />
        </div>
        <h2>Olivia Wilde</h2>
        <h3>Lead Designer</h3>
        <p>
            Nemo enim ipsam voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem nesciunt.
        </p>
    </div>
    <div class="box">
        <div class="team-mem">
            <img src="resources/img/a3.jpg" alt="flag" />
        </div>
        <h2>Ashley Greene</h2>
        <h3>SEO/Developer</h3>
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
            aperiam.
        </p>
    </div>
</div>

我的 CSS 代码

.team-area {
    background: #e7f1f8;
    padding: 50px 0;
}

.team-box {
    text-align: center;
    margin-top: 20px;
}

.team-box .box {
    width: 24%;
    display: inline-block;
}

.team-box .team-mem {
    width: 200px;
    height: 200px;
    margin: auto;
}

.team-box .team-mem img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.team-box .box h2 {
    color: #3c4761;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team-box .box h3 {
    color: #30bae7;
}

.team-box .box p {
    color: #3c4761;
    width: 80%;
    margin: auto;
}

标签： htmlcss