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;
}
到.round添加:display:inline-block;
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.
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.