Question

我最近进入了自举程序，并且在使用超大型飞行器元件时遇到了困难。每当我尝试将图像添加到jubotron并将其居中或仅将其总体移动时，它都无法在普通的CSS3中使用。我做了研究，却找不到任何东西...

我给我的图片上了一堂课，并尝试使用边距移动它，但是那根本无法解决。无论我做什么，图片都不会动。

感谢高级人员。

编辑：

HTML：

<div class="middle-container-2">
  <div class="jumbotron">
    <h1 class="display-3 text-center">Go Pro. Stay on top!</h1>
    <p class="lead text-center">Premium gives you access to the Pro scrims instantly and is the only way to support the site!</p>
    <img class="mx-auto d-blok text-center unlock-icon" src="Unlock-icon.png" alt="Unlock"/>
    <hr class="my-4">
    <p class="text-center">It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
      <a class="read-more-button btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
  </div>
</div>

CSS：

.unlock-icon {
  width: 5rem;
  height: 5rem;
  text-align: center;
}

Answer 1

在您的d-blok标签上用d-block修饰img类。之后，您可以删除text-center类并添加img-fluid类。

<img class="mx-auto d-block img-fluid unlock-icon" src="Unlock-icon.png" alt="Unlock"/>

Answer 2

与 Bootstrap

结合使用时，最流行的技巧是使用text-center将文本内容和mx-auto对齐到居中的块级标记。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>      
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  
  <p>This is some text.</p>      
  <p>This is another text.</p>      
  
  <div class="text-center"><img src="https://dummyimage.com/mediumrectangle/222222/eeeeee">
  
  </div>
  
</div>

Answer 3

在div中添加图片，并使该div对齐一些，例如居中或居右

.image-holder {
    text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>      
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  
  <p>This is some text.</p>      
  <p>This is another text.</p>      
  
  <div class="image-holder"><img src="https://dummyimage.com/mediumrectangle/222222/eeeeee">
  
  </div>
  
</div>

我如何在超大屏幕上居中放置图像？

3 个答案: