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

Question

I am trying to center the rounded image with the text, however I can not succeed to it.

What should I change to my code to do it?

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

For .round, change your margin-bottom: 10px; to margin: 0 auto 10px auto; .

I'd also suggest getting rid of your <center> tags. They're technically not supposed to be used anymore.

Answer 3

You can basically remove your outer div and center and change the image itself to display: inline-block .

New HTML code:

<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>

New CSS code:

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

Result as jsfiddle .