时间戳

首页 > 解决方案 > 有没有办法让我的图像在我的 HTML 代码中居中？

javascript - 有没有办法让我的图像在我的 HTML 代码中居中？

问题描述

我正在做一个任务，我正在创建一个关于鲨鱼的网页，我需要知道如何使我的图像居中。我已经在我的代码中尝试了 align 属性，但我的图像仍然没有居中。我希望图像位于屏幕中央。

这是我的图像代码：

在此处输入图像描述

以下是实际网页上的图片：

在此处输入图像描述

这是我的代码（如果需要）

<!DOCTYPE html>
<html>
<head>
<!-- TITLE-->
<title>All About Sharks</title>
</head>
<!-- BACKGROUND COLOR -->
<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> 


<!-- MY WEBPAGE LINK -->
<a href="https://seethewild.org/shark-threats/">Endangered Sharks Page</a>


<!-- MY EMAIL LINK-->
<a href = "mailto:audrey.washington-wright030@cfbmail.com">Send Email Here</a>


<hr>

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

<!-- FIRST PARAGRAPH -->
<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>

<!-- TWO OF MY IMAGES -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/e3c/shark-1367473.jpg" width="340" height="200">

<img align= "center" src="https://images.freeimages.com/images/large-previews/42c/shark-1384982.jpg" width="344" height="200" class="center">

<hr>

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

<!-- MY SECOND PARAGRAPH -->
 <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 -->
<img align= "center" src="https://images.freeimages.com/images/large-previews/749/flatnose-shark-1250133.jpg" width="340" height="200">
<img align= "center" src="https://images.freeimages.com/images/large-previews/201/shark-1520496.jpg" width="344" height="200" class="center">

<hr>

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

<!-- MY THIRD PARAGRAPH -->
<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 -->
<img align="center" src="https://images.freeimages.com/images/large-previews/cd1/blue-crab-1539361.jpg" width="340" height="200">
<img align="center" src="https://images.freeimages.com/images/large-previews/50f/stingray-1520490.jpg" width="344" height="200" class="center">

<hr>

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

<!-- THE FOURTH PARAGRAPH  -->
<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>

<!-- MY INTERACTIVE PIE CHART (TAKEN FROM THE W3SCHOOLS HOMEPAGE) -->
<div id="piechart"></div>
<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript">

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


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);
}
</script>

<hr>



<!-- 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>



<!-- MY FIFTH PARAGRAPH -->
<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 -->
<ul>
  <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>
</ul>




<hr>


</body>
</html>

标签： javascripthtmlcss

解决方案

首先你需要将你的图片封装div在display: flex;一个justify-content: center.

<div style="display: flex; justify-content: center;">
  <img src="https://images.freeimages.com/images/large-previews/e3c/shark-1367473.jpg" width="340" height="200">
  <img src="https://images.freeimages.com/images/large-previews/42c/shark-1384982.jpg" width="344" height="200" class="center">

</div>

推荐阅读