调整图像大小后，将图像放在自举轮播中

时间：2020-09-21 09:51:20

标签： html css

我创建了一个带有引导程序的旋转木马，并添加了3张不同大小的图片，我使用class="w-25 h-25'更改了它们的大小，但是由于某种原因（它们都向左），使对齐方式混乱了

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="./js/main.js"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-25 h-50" src="http://img.victorbip.me/apple.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-25 h-50" src="http://img.victorbip.me/paypal.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-25 h-50" src="http://img.victorbip.me/translate.png" alt="Third slide"> </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<br><br>
<p style="font-size:100%; text-align: center; font-weight: bold;">Simpele Carousel met bedrijven logo's</p>
<label for='about'>Text Box</label>
<textarea name='about' id='about' placeholder='Begin met typen..'></textarea>

我要实现的目标：使所有图像在旋转木马中居中。

3 个答案:

答案 0 :(得分：1)

将mx-auto添加到 img 标签。

 <img class="d-block w-25 h-50 mx-auto"

mx-auto类使左右边距自动生效。也就是说，

.mx-auto{
  margin-left:auto;
  margin-right:auto;
}

结果： enter image description here

实时演示 

<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" 
      type="image/svg" 
      href="https://www.flaticon.com/svg/static/icons/svg/616/616489.svg">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Water CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">
    </head>
  <body>
    
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-25 h-50 mx-auto" src="http://img.victorbip.me/apple.png" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-25 h-50 mx-auto" src="http://img.victorbip.me/paypal.png" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-25 h-50 mx-auto" src="http://img.victorbip.me/translate.png" alt="Third slide">        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <br><br>
    <p style="font-size:100%; text-align: center; font-weight: bold;">Simpele Carousel met bedrijven logo's</p>
    <label for='about' >Text Box</label>
    <textarea
      name='about'
      id='about'
      placeholder='Begin met typen..'
    ></textarea>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="./js/main.js"></script>
  </body>
</html>

答案 1 :(得分：0)

使用mx-auto来获取图像的中心位置

答案 2 :(得分：-1)

在未看到用于轮播和轮播项目​​的CSS的情况下，是否尝试过使用引导程序类mx-auto将左右边距值设置为auto，这将使宽度已定义的元素居中。

相关问题
最新问题