Question

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

我应该如何更改代码才能执行此操作？

<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 add：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。

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

3 个答案: