2016-10-21 5 views
0

Auf meinem Bild habe ich einen Fortschrittsbalken in Svg, der Bild umschließt. Wie auch immer, wenn ich versuche, das Bild zu zentrieren, geht es nicht in die Mitte. Die Svg tut aber nicht das Bild.Nicht in der Lage, Bild mit der absoluten Position zu zentrieren

Frage: Wie ist es möglich, die img und svg in der Mitte der Spalte zu machen.

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

Antwort

2

Try this:

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

Codepen Fork

+0

Vielen Dank für Ihre Hilfe hat gut funktioniert. – user4419336

+0

Gern geschehen. Alles Gute mit Ihrer Seite. – sideroxylon