Tips for aligning a div in the center while adjusting screen size

My goal is to showcase a dashboard with a card layout. The desired layout can be seen https://i.sstatic.net/OWgpE.png:

Here is a snippet from the 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>

Below is a snippet of the 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: "";
}

I am looking to align the chart-legend in the center both horizontally and vertically within the remaining space of the card, even when the window size changes. Any suggestions on how I could accomplish this?

Answer №1

Ensure the canvas element has a set width (e.g., width=300px) and apply the following CSS rules with margin:auto as shown below:

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

 .!emptyAlltimeStats{
     text-align:center;
    }

Answer №2

how to achieve center alignment of a div using the CSS property 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;
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PHP and MySQL form is not being updated with new data

In my database, the fields include: id,name,email_id,address,phone_no,username,password,category,date <?php include_once('connect_to_mysql.php'); if(isset($_POST["submit"])){ $a=mysql_real_escape_string($_POST["name"]); ...

Instructions for extracting the href value from an anchor tag using JavaScript within a specified string

How can I retrieve the href value of the last anchor tag in the provided content string using pure JavaScript, excluding jQuery? var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba ...

What is the process for retrieving my dates from local storage and displaying them without the time?

Having an event form, I collect information and store it in local storage without using an API. However, I face a challenge when extracting the startdate and enddate out of localstorage and formatting them as dd-mm-yyyy instead of yyyy-mm-ddT00:00:00.000Z. ...

Using grid-template-areas in ReactJS function components does not function as expected

REMINDER: Check out and customize the code in CodeSandbox. This is a parent component with 5 children elements. Among them, 3 are React components and the remaining 2 are regular HTML buttons: import "./App.css"; import React from "react&qu ...

Is it possible to simultaneously play several one-shot sound effects on mobile web browsers?

I'm attempting to trigger a sound effect when the user clicks a button on my web application. Initially, I experimented with this approach: var sound = new Audio("soundeffect.ogg"); function clickHandler(){ sound.play(); } Unfortunately, if the ...

Invoke a C# function (returning a string) within ASP.NET to set the source attribute for an HTML element

I have developed some C# Methods that return a string output, such as "C:/tracks/audio1.mp3", and I want to use this as a reference for my ASP.NET project. Now, I am trying to incorporate my method "GetTrackPath()" into the HTML audio tag so that the meth ...

Dealing with a jQuery/JavaScript issue involving thumbnail images

I am facing an issue with smooth transitions between thumbnail images in HTML list tags. I have Jquery listeners set up for mouseenter and mouseleave events that update a parent image when a thumbnail is hovered over. The problem arises when scrolling fro ...

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

As someone new to development, I am looking for a way to scroll my question pallet up and down based on the question number when I click next and previous buttons. In my pallet div, there are over 200 questions which are dynamically generated. However, th ...

Steps for updating images and text on a live webpage after launching the web application

I added an image to a jsp file. The image, named kid.jpg, is downloaded and stored in the /resources/images folder as shown in the code snippet below. <li style="background-image: url('resources/images/kid.jpg');"> Now that my web app is ...

Can someone assist me in successfully incorporating a web font into a template?

After downloading a Wordpress template, I found the font used for h1 and h2 text to be difficult to read due to its slim design - Century Gothic. However, I prefer using Noteworthy, a font available on my Mac. I converted Noteworthy from OTF to web-font st ...

Unlocking the power of HTML tags in Selenium WebDriver: accessing elements like a pro

I'm working with this HTML snippet. <span class="ng-binding" ng-bind="::result.display">All Sector ETFs</span> <span class="ng-binding" ng-bind="::result.display">China Macro Assets</span> <span class="ng-binding" ng-bind ...

Arranging Divs into Two Columns in CSS - A Simple Guide

I'm trying to display a variable number of divs across two lines, like this: [1] [3] [5] [7] [2] [4] [6] ... I've explored using the column-count property in CSS, but it doesn't quite fit my needs since it requires a fixed number of ...

Prevent anchor link click and drag functionality on an HTML page / Swipe through a container containing links

Is there a way to prevent clicking and dragging on a link in a webpage? When you click the left mouse button on a link and drag it, you can unintentionally move the link or open a new tab. I am looking for a way to disable this behavior using JavaScript o ...

Perform mathematical operations on numbers using jQuery based on their index

Trying to manipulate numbers in the HTML with this less-than-ideal code. The display starts like this at the beginning: 1/ 6 And ends up like this at the final index: 6/ 6 Utilizing this in conjunction with pageslide.js as a workaround for the default ...

Place a label within a container and surround it with a single border. Inside the container, create an unordered list

I'm attempting to design a filter dropdown feature where only the label of the dropdown is visible at first, and then upon clicking the label, a list of options will drop down over the top of the remaining content using absolute positioning. The chall ...

Enhance the responsiveness of full-screen pop-ups

My current project involves creating a full-screen pop-up for a specific application. /* Custom Full Screen Popup */ .fullscreen-popup { position: fixed; top: 0; ...

Center the first column in jQuery Datatables

Looking to center-align only the first column named "Status": $("#TransactionTable").DataTable({ ajax: { url: '/Transaction/SearchMockup', type: 'POST', data: { ...

Passing data from the <ion-content> element to the <ion-footer> element within a single HTML file using Ionic 2

In my Ionic 2 html page, I have a setup where ion-slide elements are generated using *ngFor. I am seeking a way to transfer the data from ngFor to the footer section within the same page. <ion-content> <ion-slides> <ion-slide *n ...

Initiate an animation upon reaching a designated element using Jquery scroll event

Hey there! I've been trying to create an animation without using any plugins, but unfortunately, I haven't had much luck so far. Here's the code I've been working on. If anyone can help me figure this out, I'd really appreciate it ...

What is the best way to place a vertical line above the text when it is in use?

How can I add a vertical line above the active element using CSS? I was recommended to use either :before or :after, but I'm not sure how to implement them. I tried using :after without success. Any advice on achieving this effect? See the design exam ...