Unable to center image with position absolute
css
Solution
Try this:
.profile-avatar img {
position: absolute;
margin: auto;
left: 0;
right: 0;
text-align: center;
z-index: 1;
}
Codepen Fork
Problem
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; } ```