Tips for Positioning Content in the Center of a Bootstrap Div

I'm struggling to center the jackpot-item-container div within a chart. Can anyone help me figure this out?

Check out my code on CodePen.

<div id="jackpot-container" class="col-sm-12">
  <div id="jackpot-item-container">
    <span id="jackpot-item-val">1</span>
    <span id="jackpot-item-max-val">/50</span>
  </div>
  <canvas id="jackpot-chart"></canvas>
</div>

body, html { overflow:hidden; }

#jackpot-container {
    border-style: solid;
    border-width: 1px;
    height: 400px;
    padding: 0;
    margin: 0 auto;
}

#jackpot-item-container {
    border-style: solid;
    border-width: 1px;
    width: 300px;
    text-align: center;
}

The code for the chart is available on CodePen as well.

Answer №1

window.onload = function() {
    var doughnutEl = document.getElementById("lottery-chart").getContext("2d");
    var doughnut = new Chart(doughnutEl).Doughnut(
        // Data
        [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Blue"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            }
        ],
        // Options
        {
            segmentShowStroke : true,
            segmentStrokeColor : "#fff",
            segmentStrokeWidth : 2,
            percentageInnerCutout : 50,
            animationSteps : 100,
            animationEasing : "easeOutBounce",
            animateRotate : true,
            animateScale : false,
            responsive: true,
            maintainAspectRatio: false,
            showScale: true,
            animateScale: true
        });
};
body, html { overflow:hidden; }

#lottery-container {
    border-style: solid;
    border-width: 1px;
    height: 400px;
    padding: 0;
    margin: 0 auto;
}

#lottery-item-container {
    border-style: solid;
    border-width: 1px;
    width: 300px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div id="lottery-container" class="col-sm-12">
  <div id="lottery-item-container">
    <span id="lottery-item-val">1</span>
    <span id="lottery-item-max-val">/50</span>
  </div>
  <canvas id="lottery-chart"></canvas>
</div>

To have it in the middle of the doughnut apply this CSS to the item:

#lottery-item-container {
    border-style: solid;
    border-width: 1px;
    width: 300px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
}

Answer №2

To center block elements in its parent, apply margin: 0 auto.

 <div id="prize-container" class="col-sm-12">
  <div id="prize-item-container" style="margin:0 auto;">
     <span id="prize-item-val">1</span>
     <span id="prize-item-max-val">/50</span>
  </div>
  <canvas id="prize-chart"></canvas>
 </div>

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

Which is more recommended to use in AJAX (XMLHttpRequest) - eventListener or readyStateChange method?

As I revisited a video from WWDC12 discussing advanced effects with HTML5, I couldn't help but notice that for the demo they utilized req.addEventListener("load",callback,true) instead of the usual onreadystatechange. This made me wonder: what differ ...

Using two different colors in text with CSS

Is it possible to have text in two different colors like this: https://i.stack.imgur.com/R40W1.png In terms of HTML, I tried looking it up but found answers related to:- https://i.stack.imgur.com/GRAfI.png ...

What is the best way to hide the div when scrolling to the top?

Is there a way to hide the circle once it's scrolled to the top? Currently, I can scroll the circle to the top but it remains visible. Upon further exploration, I found that clicking on the circle scrolls it to the top and then on a second click, it f ...

What is the best way to limit the number of visitors allowed on a webpage?

I'm in the process of working on an application that includes an edit button: Here's my edit button: <th title="Edit task" class="edit" style="float: right; $color;"> <?php echo "<a href=edit.php?id=" . $row["id"] . "> ...

How to place a button in SwiperJs using React

Can anyone provide guidance on how to position the navigation buttons in a manner similar to the image below? The desired layout is for the buttons to appear on the outer edges of the swiper component. You can refer to this demo for more information. htt ...

Using either Javascript or jQuery, I want to set a value within an if statement

Can I set a value within an if statement, like this: if (a = jQuery("#user > .mask.fix > .a1").css('display') != 'none'){ b = a + 'hello'; //b=jQuery("#user > .mask.fix > .a1").css('display')+&apos ...

Having difficulty adjusting the padding of the Material UI table

I have been using the Table component provided by the material-ui library in my React project. However, I have encountered an issue where each row, including the header, has a padding of 24px on the top and bottom that I am unable to modify or overwrite. D ...

Bootstrap datepicker not applying datepicker-options as expected

I have been trying to pass all my options in a JSON file according to the instructions on http://angular-ui.github.io/bootstrap/#/top, but unfortunately, I haven't been able to get it to work. I've been experimenting with the Plunkr provided on t ...

A div element with the class name "draggable" is

One of my functions sends notifications to a page by prepending a main div with the notification. Here is the function: function displayNotification(notificationTitle, notificationContent, notificationColor, notificationSize) { console.log('Attem ...

Tips for wrapping text around an image using Bootstrap 5

I am having trouble getting my text to wrap around an image using the Bootstrap 5 grid system. I've attempted to use 'float: right' on the image, but it hasn't produced the desired result. The text should flow naturally around the imag ...

Blog HTML Editing Tool

Apologies for the simple question. I'm struggling to find the right plugin for blog writing that allows users to edit fonts and add images. I also need the ability to submit the generated HTML code into MySQL. Can anyone offer assistance with this pro ...

Tips for avoiding Navbar dropdowns covering other content

Using bootstrap 4 for a project and experiencing an issue with the navbar overlapping the content. How do I make the remaining content adjust when toggling the dropdown menu? To address this problem, I have applied a 50px margin to the body element. The ...

How can you set up a button to trigger an action only after reaching a specified number of clicks?

Is it possible to create a button in HTML that remains inactive until a specific number of clicks have been registered? Imagine a scenario where a button does nothing when clicked until it has been tapped 100 times. Upon the 100th click, it redirects to a ...

My custom style sheet not taking precedence over Bootstrap styles

Using !important is something I try to avoid as much as possible. When I downloaded Bootstrap 3.0, I made sure to include the call to the .css file AFTER my core style sheet so that any changes I make to elements like .h1, h1{} take precedence over Bootstr ...

In Bootstrap 5, the anchor tag is causing a shift in the background color of surrounding tags upon being clicked

Why does clicking on an anchor tag temporarily change the background of other tags that weren't clicked? What am I doing wrong? https://i.stack.imgur.com/ZKlUT.png Check out the code below: <nav class="navbar navbar-expand-lg navbar-light bg- ...

What is the alternative to using echo when outputting HTML?

I am working on a function... $post_text .= '<div style="font-size: 15px; color: blueviolet">'; $post_text .= "<br>"; $post_text .= 'Text number 1.'; $post_text .= "<br>"; $post_text .= 'Text number 2.'; $po ...

The oval shape of a Canvas circle in HTML5 is due to its width and height properties

var qcanvas = $('#canvas'); var canvas = ctl_canvas[0]; var context = canvas.getContext('2d'); qcanvas.css('border', '1px solid black'); qcanvas.css('width', 400); qcanvas.css('height', 75); Afte ...

dotdotdot.js is only functional once the window has been resized

For my website, I am attempting to add an ellipsis to multiline paragraphs that exceed a certain height. I have incorporated the dotdotdot jquery plugin from here. An odd issue arises when the page is refreshed, as the ellipsis does not appear until I res ...

Why should one incorporate semantic markup into their HTML documents?

During my studies, I learned that tags provide a definition to content in HTML. For example: <section>It's a section</section> <article>It's an article</article> By correctly using semantic markup in my HTML, the documen ...

Tips for displaying videos with sound when the autoplay has been successfully implemented, but the audio is not working

I've been working on creating a video player with autoplay functionality, but I'm facing an issue with the sound not playing. Here's what I currently have in my code, but it's not behaving as expected: var myaudio = docum ...