如何使此图像与文本居中对齐？

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;

Answer 2

对于.round，更改您的下margin-bottom: 10px; margin: 0 auto 10px auto; 。

我还建议您摆脱<center>标签。 从技术上讲，不应再使用它们。

Answer 3

您基本上可以删除外部div和center并将图像本身更改为display: inline-block 。

新的HTML代码：

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

新的CSS代码：

.team-1-member {
    text-align: center;
    margin-top: 48px;
}

.round {
    border-radius: 50%;
    width:150px;
    height:150px;
    display: inline-block;
}

.team-1 h2 {
    margin-bottom: 8px;
}

结果为jsfiddle 。