Fails to Align with the text outside

[panickerr]

The Svg fails to align with the text( not the text inside the circle ) . I have divided the card into two halfs and put 3 containers in both halfs one the legend and the other being the SVG. but they are never centered.

The css ` .progress-wrapper{ position: relative; /margin:20px auto;/
font-size: 18px; }

    .progress{
        position: absolute;
        color: #0000FF;
        font-weight: 400;
        line-height: 1;
        /*text-align: center;*/
         width: 100%;
         height: 35%;
    }`

the html: `

Trail index

                    <div layout="row" style="height:280px;">

                        <div layout-margin flex="50" layout="column" layout-align="space-around start"  >
                                <div>Current Month </div>
                                <div>Previous Month</div>
                                <div>Previous Quarter </div>
                            </div>

                 <div flex="50" layout="column" layout-align="space-around center"    >
                                <div class="progress-wrapper">
                                       <div class="progress ng-cloak" ng-style="getStyle()">234</div>
                                           <div
                                                round-progress
                                                max="100"
                                                current="50"
                                                color="#45ccce"
                                                bgcolor="#eaeaea"
                                                radius="30"
                                                semi="isSemi"
                                                rounded="rounded"
                                                stroke="5"
                                                clockwise="clockwise"
                                                responsive="responsive"
                                                duration="800"
                                                animation="easeInOutQuart"
                                                offset="1"
                                                on-render="showPreciseCurrent">
                                            </div>
                                    </div>

                                <div class="progress-wrapper">
                                   <div class="progress ng-cloak" ng-style="getStyle()">345</div>
                                    <div
                                            round-progress
                                            max="100"
                                            current="30"
                                            color="#45ccce"
                                            bgcolor="#eaeaea"
                                            radius="30"
                                            stroke="5"
                                            semi="false"
                                            rounded="true"
                                            clockwise="false"
                                            responsive="false"
                                            duration="800"
                                            animation="easeInOutQuart"
                                        animation-delay="0"> </div>
                                </div> 

                                <div class="progress-wrapper">
                               <div class="progress ng-cloak" ng-style="getStyle()">456</div>
                                    <div  round-progress
                                          max="100"
                                          current="90"
                                          color="#45ccce"
                                            bgcolor="#eaeaea"
                                            radius="30"
                                          semi="isSemi"
                                          rounded="rounded"
                                          stroke="5"
                                          clockwise="clockwise"
                                          animation="easeInOutQuart">
                                    </div>
                                </div>

                            </div>
                        </div>
                </md-card>
                `

The output of the code : Similar output in a smaller Div : The expected output or the ideal one where the legend is aligned with the circle text:

The get style : ` $scope.getStyle = function(){ var transform = ($scope.isSemi ? '' : "translateY(-50%) ") + "translateX(-50%)";

            return {
                'top': $scope.isSemi ? 'auto' : '50%',
                'bottom': $scope.isSemi ? '5%' : 'auto',
                'left': '50%',
                'transform': transform,
                '-moz-transform': transform,
                '-webkit-transform': transform,
                'font-size': $scope.radius/3.5 + 'px'
            };
        };`

[crisbeto]

1. This depends a lot of how your browser renders text and what any other CSS on your page is doing.
2. You don't have to use the getStyle method from the demo, I used it in order to make it look better, no matter what options are selected.

Here's the bare minimum of what you can do to center the text:

<div class="progress-wrapper">
    <div class="progress">Text goes here</div>
    <div round-progress></div>
</div>

.progress-wrapper{
    position: relative;
}

.progress{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add any relevant browser prefixes if necessary */
    z-index: 1;
}

[crisbeto]

@panickerr Did you manage to solve this?

[crisbeto]

Closing this, but feel free to comment if there's still an issue.