html - 如何将此图像与文本居中对齐？

Question

我试图将圆形图像与文本居中，但我无法成功。

我应该如何更改我的代码才能做到这一点？

https://jsfiddle.net/zxwz5739/

<div class="col-sm-6">
    <div class="team-1-member">
        <div class="round">
            <center>
                <img alt="Team Member" src="http://i.imgur.com/qIKR0Qt.gif">
            </center>
        </div>
            <h2>John Doe</h2>

    </div>
</div>

.team-1-member {
    text-align: center;
    margin-top: 48px;
}
.round {
    border-radius: 50%;
    overflow: hidden;
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
}
.round img {
    display: block;
    min-width: 100%;
    min-height: 100%;
}
.team-1 h2 {
    margin-bottom: 8px;
}

Answer 1

在 .round 中添加:display: inline-block;