CODEWITHSUNDEEP
htmlcss
Bartzilla
Bartzilla

Reputation: 2794

How to position div in the center when resizing screens?

I want to display a dashboard using a card layout. Ideally, I want to achieve the following layout.Card:

HTML File:

<div id="overallCanvasWrapper" class="statistic-container">
                <p ng-show="emptyAlltimeStats">No data available for given filters</p>
                <div ng-show="!emptyAlltimeStats">
                    <div class="header-piechart">Pie Chart</div>
                    <canvas id="pieCombined" class="chart chart-pie" chart-data="combinedData" chart-labels="labels" chart-options="options"
                        chart-colours="colours">
                    </canvas>
                    <div class="chart-legend">
                        <ul>
                            <li class="blue">Blue</li>
                            <li class="red">Red</li>
                        </ul>
                    </div>
                </div>
            </div>

CSS file:

canvas{
  width: 100% !important;
  max-width: 450px;
  height: auto !important;
}
.statistic-container {
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 5px;
    padding-right: 5px;
    height: 340px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: rgba(240,240,240,0.8);
    background-blend-mode: soft-light;
}
.blue:before { background-color: #00aef3; }
.red:before { background-color: #d8171e; }

.chart-legend  li:before {
    display: block;
    width: 5px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 3px;
    content: "";
}

However, I want to place chart-legend in the center (horizontally and Vertically) of the remaining part of the card even when the window is resized. How can I achieve that?

Upvotes: 0

Views: 85

Answers (2)

Hidayt Rahman
Hidayt Rahman

Reputation: 2678

achieve centre alignment of div using position: absolute;

canvas{
    width: 100% !important;
    max-width: 450px;
    height: auto !important;
    position: relative;
    }   
    .statistic-container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    }

Upvotes: 0

Nensi601
Nensi601

Reputation: 136

give the canvas element a fixed width (ex: width=300px) and use the rules margin:auto; for example: 

 canvas{
     width: 200px;
     margin-left: auto;
     margin-right:auto;
    }

 .!emptyAlltimeStats{
     text-align:center;
    }

Upvotes: 1

Related Questions