wolfgang1983 wolfgang1983 - 1 month ago 10
CSS Question

Unable to center image with position absolute

On my image I have a progress bar in svg that wraps around image. How ever when I try and center the image it does not go into the middle. The svg does but not the image.

Question: How is it possible to make the img and svg be in middle of column.

Codepen Example Here

HTML

<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="column-module">
<div class="profile-module-info">
<div class="row">
<div class="col-lg-3">
<div class="profile-avatar">
<div class="image">
<img data-src="holder.js/154x154" width="154" height="154" class="img-circle img-thumbnail" />
</div>
<svg class="mi-progressbar">
<circle id="circle" r="25%" cx="50%" cy="50%" stroke-width="10"></circle>
</svg>
</div>
</div>
<div class="col-lg-6">

</div>
<div class="col-lg-3">
<div class="profile-statistics">
<ul class="list-unstyled">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


CSS

body {
background-color: #F0F0F0;

}

.container {
margin-top: 40px;
}

.column-module {
background: #fff none repeat scroll 0 0;
border-radius: 4px;
min-height: 100px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
margin-bottom: 20px;
}

.column-module .column-module-heading {
border-bottom: 1px solid #dedede;
padding: 20px;
}


.column-module .column-module-heading {
border-bottom: 1px solid #dedede;
padding: 20px;
}

.column-module .column-module-heading .column-module-title {
color: #1f2836;
font-size: 18px;
font-weight: bold;
}


.btn-group{
display: flex;
}

.profile-avatar {
border: 1px solid #bec0c2;
position: relative;
text-align: center;
margin-left: 2rem;
margin-top: -2rem;
margin-bottom: 2rem;
}

.profile-avatar svg {
position: relative;
transform: rotate(-90deg);
fill: none;
stroke: #337ab7;
stroke-dasharray: 0 0;
}

.profile-avatar img {
position: absolute;
top: 0;
left: 0;
text-align: center;
z-index: 1;
}

svg circle.progress-bar-success{
stroke:#5cb85c;
}
svg circle.progress-bar-info{
stroke:#5bc0de
}
svg circle.progress-bar-warning{
stroke:#f0ad4e;
}
svg circle.progress-bar-danger{
stroke:#d9534f;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}

a {
cursor: pointer;
}


enter image description here

Answer

Try this:

.profile-avatar img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
}

Codepen Fork