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;
}
Vielen Dank für Ihre Hilfe hat gut funktioniert. – user4419336
Gern geschehen. Alles Gute mit Ihrer Seite. – sideroxylon