Question

我正在努力将元素放在容器中。

我找到了一个我在我的网站上修改并实施的计数器。

到目前为止一切都有效，但不知何故，我无法将计数器置于其容器内。

这应该是它的样子：

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 1

.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

Answer 2

取下宽度：

UISegmentedControl.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.red], for: .selected)

改变＆＃34;离开＆＃34;财产：

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

以下是修改后的代码： http://codepen.io/Raddy/pen/akRAyN

将元素集中在容器内部的问题

2 个答案: