Problems centering elements inside of a container

Question

I am struggling to position elements inside a container.

I found a counter that I modified and implemented on my site.

Everything works so far but somehow I am not able to center the counter inside its container.

This is how it should look:

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;
}

score 1 · Accepted Answer · edited May 23 '17 at 12:22

.c-counter__container .c-counter__item .chart {
    position: relative;
    width: 100%;                       /* adjusted */
    height: 100%;                      /* adjusted */
}

.c-counter__container .c-counter__item .chart span {
    font-weight: bolder;
    font-size: 2.5em;
    line-height: 2.5em;
    top: 50%;                          /* adjusted */
    left: 50%;                         /* adjusted */
    transform: translate(-50%,-50%);   /* new; explanation below; */
    position: absolute;
    height: 100px;
    width: 100px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background-color: black;
    color: white;
}

Revised Codepen

Centering with absolute positioning and transform properties

score 0 · Answer 2 · answered Aug 06 '16 at 18:35

0

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

answered Aug 06 '16 at 18:35

Raddy

303
1
2
12

ahh thanks a lot, that works perfekt. and to align them all at the same level (the second bumps up because of the longer text) i simply add padding? or is there a better way to have them all the same level no matter whats beneath it? – HendrikEng Aug 06 '16 at 18:38

Problems centering elements inside of a container

2 Answers2