Is there a way that I can center my pie chart in my HTML Code?

I am currently working on an assignment with HTML and I am creating a webpage about sharks and I implemented a piechart into my code but whenever I go and open up my page, it’s not centered and I would like to know I could get it to be centered in the very middle of the screen.

Here is what my code looks like so far:

<!DOCTYPE html>
<!-- TITLE-->
<title>All About Sharks</title>
<body style="background-color:#9FB4E5">

<!-- HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:50px">All About Sharks</h1>

<!-- A PART OF HEADER 1 -->
<h1 align = "center" style ="color:White;font-family:Times;font-size:20px">A Page Dedicated to Sharks</h1> 

<a href="">Endangered Sharks Page</a>

<a href = "">Send Email Here</a>


<!-- HEADER 2 --> 
<h2 style ="color:White;font-size:20px;font-family:Times">What Are Sharks?</h2>

<p style ="color:Black;font-family:Times"><b><i> Sharks are a type of long-bodied marine fish with a cartilaginous skeleton (skeleton made entirely of cartilage), a large dorsal fin, and toothlike scales (also called placoid). Most sharks are predatory, although the largest kinds feed on plankton. The common myth is that sharks attack humans whenever humans are within the vicinity of them, but of all 470 species, only somewhere around a dozen are dangerous to humans, and even the ones that are do not prefer to eat them.</b></i></p>

<div style="display: flex; justify-content: center">
<img align= "center" src="" width="340" height="200">

<img align= "center" src="" width="344" height="200" class="center">


<!-- HEADER 3 -->
<h3 style ="color:White;font-family:Times;font-size:20px"> Where Are Sharks Found?</h3>

 <p style ="color:Black;font-family:Times"><b><i>Sharks live in all five of the Earth's oceans: The Atlantic, Pacific, Indian, Arctic, and Southern. Although they are commonly found in oceans, sharks can also be found in freshwater/saltwater lakes and some rivers too. Oftentimes, sharks swim in the Epipelagic zone (the topmost layer of the ocean) which is where human beings swim as well, but sharks rarely bother them.</b></i></p>
<!-- MORE IMAGES -->
<div style="display: flex; justify-content: center">
<img align= "center" src="" width="340" height="200">

<img align= "center" src="" width="344" height="200" class="center">


<!-- HEADER 4 -->
<h4 style ="color:White;font-family:Times;font-size:20px"> What Do Sharks Eat?</h4>

<p style ="color:Black;font-family:Times"><b><i>Sharks eat a wide variety of marine life ranging from smaller organisms like snails, sea urchins, crabs, and fish to larger organisms like stingrays, seals, birds, and even other sharks. As apex predators, sharks play an important role in the oceanic ecosystem by maintaining the diversity of the species below them and keeping balance with competitors. Just to give an example of how important these creatures are, a decrease in the shark population could result in the overgrowth of algae or the extinction of smaller animals like scallops who rely on sharks to eat their predators. </b></i></p>

<!-- MORE IMAGES -->

<div style="display: flex; justify-content: center">
<img align="center" src="" width="340" height="200">

<img align="center" src="" width="344" height="200" class="center">


<!-- HEADER 5 -->
<h5 style ="color:White;font-family:Times;font-size:20px">How Are Sharks Being Killed Everyday?</h5> 

<p style ="color:Black;font-family:Times"><b><i>According to IUCN (International Union for Conservation of Nature) analysts, among all 470 species of sharks, 2.4 percent are critically endangered, 3.2 percent are endangered, 10.3 percent are vulnerable, and 14.4 percent are near threatened by commercial shark finning (usually for medicine or shark fin soup), overfishing, fisheries bycatch, and habitat loss.</b></i></p>

<div id="piechart"></div>
<script type="text/javascript"src=""></script><script type="text/javascript">

google.charts.load('current', {'packages':['corechart']});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Shark Deaths', 'Killing Methods'],
  ['Commercial Shark Finning/Medicine/Shark Fin Soup', 48],
  ['Overfishing', 4],
  ['Fisheries Bycatch', 39],
  ['Habitat Loss (Pollution, Climate Change, Fishing)', 91],

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'Percentage of Shark Killing Methods Everyday', 'width':450, 'height':300};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);


<!-- HEADER 6 -->
<h6 style ="color:White;font-family:Times;font-size:20px"> What Is The Purpose Of This Page And What Can You Do To Stop Shark Cruelty?</h6>

<p style ="color:Black;font-family:Times"><b><i>The entire purpose of this page is to bring attention to and educate about endangered marine animals, particularly sharks. Shark lives are being threatened everyday by human activities and because of these activities, it's not just shark lives that are threatened but other aquatic animal's lives as well because they depend on sharks in so many ways. This page was meant to motivate its readers into standing up for the well-being of sharks. </b></i></p>

<!-- A PART OF HEADER 6-->
<h6 style ="color:White;font-family:Times;font-size:20px"><u>List Of Things You Can Do</u></h6>

<!-- MY LIST -->
  <li><b>Get the message out on social media via Instagram, Facebook, Twitter, etc.</b></li>
  <li><b>Start a campaign at work or school.</b></li>
  <li><b>Start a protest.</b></li>
  <li><b>Make a petition.</b></li>
  <li><b>Begin a fundraiser.</b></li>



Here is the screenshot of the piechart on the actual webpage:

Center it in the div tag. Just add align="center" to the div and that should do it.

1 Like