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

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

我应该如何更改代码来执行此操作

无名氏
.一人小组{
文本对齐：居中；
边缘顶部：48px；
}
.轮{
边界半径：50%；
溢出：隐藏；
宽度：150px；
高度：150像素；
边缘底部：10px；
}
.圆形img{
显示：块；
最小宽度：100%；
最小高度：100%；
}
.1队h2{
边缘底部：8px；
}

to.round添加：显示：内联块

对于.round，更改您的

页边距底部：10px至
页边距：0自动10px自动

我还建议去掉你的
标签。从技术上讲，它们不应该再被使用。
您基本上可以移除外部
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。您正在尝试使图像相对于文本居中（并将文本保留在原来的位置），仅将图像居中放置在框中，还是将图像和文本居中放置在框中？
<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>

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