如何使用 html 在幻灯片上将我的图像居中？ (w3 模板)

Question

Im developing a website using Html and Css, and I've been trying to center the images inside the slideshow, I've searched all over stack overflow and countless other websites, yet I still couldn't manage to find any solution or answer that uses code similar to the code that I've written.我正在使用 Html 和 Css 开发一个网站，并且我一直在尝试将幻灯片中的图像居中，我已经搜索了堆栈溢出和无数其他网站，但我仍然无法找到任何解决方案或答案使用类似于我编写的代码的代码。

<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>


<div class="w3-content w3-display-container">
  <img class="mySlides" src="pancakes.jpeg" style="width: 75%">
  <img class="mySlides" src="acai.jpg" style="width: 75%">
  <img class="mySlides" src="avocado.jpg" style="width: 75%">
  

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>

Answer 1

Try this尝试这个

<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;margin:auto}
</style>
<body>


<div class="w3-content w3-display-container">
  <img class="mySlides" src="pancakes.jpeg">
  <img class="mySlides" src="acai.jpg">
  <img class="mySlides" src="avocado.jpg">
  

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>

I have added margin:auto to .mySlides class & I have removed width:75% from img tag我在.mySlides类中添加了margin:auto .mySlides我已经从 img 标签中删除了width:75%

Answer 2

Try this尝试这个

<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>


<div class="w3-content w3-display-container">
  <img class="mySlides" src="pancakes.jpeg" style="max-width: inherit; max-height: inherit">
  <img class="mySlides" src="acai.jpg" style="max-width: inherit; max-height: inherit">
  <img class="mySlides" src="avocado.jpg" style="max-width: inherit; max-height: inherit">
  

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>

Do not apply a special width or height to the image tag but instead make your img inherit of their container so every img will have the same size and fully occupy the container.不要对图像标签应用特殊的宽度或高度，而是让你的 img 继承它们的容器，这样每个 img 将具有相同的大小并完全占据容器。

如何使用 html 在幻灯片上将我的图像居中？ (w3 模板)

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-10-02 20:55:30

解决方案2
0 2020-10-02 21:23:58

如何使用 html 在幻灯片上将我的图像居中？ (w3 模板)

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-10-02 20:55:30

解决方案2 0 2020-10-02 21:23:58

解决方案1
0 已采纳 2020-10-02 20:55:30

解决方案2
0 2020-10-02 21:23:58