Karle Karle - 4 months ago 15
CSS Question

Problems centering elements inside of a container

hey there it might be a stupid questions but i am struggeling to position elements inside of a container, i found a counter here i modified and implemented on my site. everything works so far but somhow i am not able to center the counter element inside of its container. thanks a lot

http://codepen.io/HendrikEng/pen/NAOmkr

this i how it should look:

enter image description here

html:

<div class="c-counter">
<div class="c-counter__progress-bar c-counter__item">
<div class="c-counter__single-bar">
<h6 class="c-counter__headline">Jahre Erfahrung</h6>
<p class="c-counter__text">Aber wir lernen nie aus.</p>
<span class="c-counter__bar" data-percentage-value="19" data-value="19" style="width: 19%; background-color: rgb(77, 171, 252);"></span>
</div>
</div>
<div class="c-counter__progress-bar c-counter__item">
<div class="c-counter__single-bar">
<h6 class="c-counter__headline">Abgeschlossene Projekte</h6>
<p class="c-counter__text">Und wir haben noch viel mehr vor.</p>
<span class="c-counter__bar" data-percentage-value="568" data-value="568" style="width: 568%; background-color: rgb(77, 171, 252);"></span>
</div>
</div>
<div class="c-counter__progress-bar c-counter__item">
<div class="c-counter__single-bar">
<h6 class="c-counter__headline">Zufriedene Kunden</h6>
<p class="c-counter__text">Wir wollen mehr davon.</p>
<span class="c-counter__bar" data-percentage-value="78" data-value="78" style="width: 78%; background-color: rgb(77, 171, 252);"></span>
</div>
</div>
<div class="c-counter__progress-bar c-counter__item">
<div class="c-counter__single-bar">
<h6 class="c-counter__headline">Prozent Ambitioniert</h6>
<p class="c-counter__text">Und unermüdlich inspiriert</p>
<span class="c-counter__bar" data-percentage-value="100" data-value="100" style="width: 100%; background-color: rgb(77, 171, 252);"></span>
</div>
</div>
<div class="c-counter__progress-bar c-counter__item">
<div class="c-counter__single-bar">
<h6 class="c-counter__headline">Stufen Bis zum 4. Stock</h6>
<p class="c-counter__text">Wir haben auch einen Fahrstuhl</p>
<span class="c-counter__bar" data-percentage-value="88" data-value="88" style="width: 88%; background-color: rgb(77, 171, 252);"></span>
</div>
</div>
</div>
</div>


css:

.c-counter {
background: grey;
margin-top: span(0.8);
margin-bottom: span(.8);
display: inline-block;
}
.c-counter__progress-bar {
display: none;
}
.c-counter__container {
.c-counter__item {
display: inline-block;
text-align: center;
.chart {
position: relative;
width: 155px;
height: 175px;
span {
font-weight: bolder;
font-size: 2.5em;
line-height: 2.5em;
top: 50px;
left: 50px;
position: absolute;
height: 100px;
width: 100px;
-moz-border-radius: 50px;
border-radius: 50px;
background-color: black;
color: white;
}
}
}
}
.c-counter__headline {
font-size: 2em;
background: yellow;
margin-top: 50px;
max-width: 250px;
line-height: .9em;
}
.c-counter__text {
background: green;
font-size: 1.2em;
}
.c-counter__item {
position: relative;
background-color: pink;
width: 250px;
max-width: 250px;
height: 200px;
max-height: 200px;
margin-left: 100px;
}

Answer

Take off the width:

.c-counter__container .c-counter__item .chart {
   height: 175px;
   position: relative;
}

And the change the "left" property on this:

.c-counter__container .c-counter__item .chart span {
    background-color: black;
    border-radius: 50px;
    color: white;
    font-size: 2.5em;
    font-weight: bolder;
    height: 100px;
    left: 76px;
    line-height: 2.5em;
    position: absolute;
    top: 50px;
    width: 100px;
}

Here is the code modified: http://codepen.io/Raddy/pen/akRAyN