css 如何始终使幻灯片图像居中？

wyyhbhjk 于 2023-02-17 发布在其他

关注(0)|答案(1)|浏览(161)

current state of my carousel
我正在尝试编码我的网站的幻灯片旋转木马，所以无论我上传什么图片的幻灯片，图像将始终居中，无论什么（目前只有中心的图像，如果它是一个特定的分辨率）。
我试过在CSS中调用这个类并将边距居中，但仍然不起作用。以下是目前为止我的代码：
我在CSS中调用了特定的幻灯片项类，更新了边距，图像仍然没有居中。

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

.carousel-control>.fa {
  font-size: 40px;
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
  margin-top: -20px;
}

.item {
  margin: 0px auto; // center
  width: 1100px;
  height: 500px;
  text-align: center;
}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="First slide" text-align="center">
    </div>

    <div class="item">
      <img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="Second slide" text-align="center">
    </div>

    <div class="item">
      <img src="https://thumbs.gfycat.com/ShallowRawCockatoo-size_restricted.gif" alt="Third slide" text-align="center">
    </div>

  </div>

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="fa fa-angle-left"></span>
  </a>

  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="fa fa-angle-right"></span>
  </a>
</div>

css

来源：https://stackoverflow.com/questions/75460759/how-to-always-have-slide-image-centered

1条答案

按热度按时间

92vpleto1#

首先，您有一个无效的CSS注解，这也可能会引起一些麻烦，在CSS中注解的正确方法是使用/* comment */
接下来，让我们看看您如何尝试将事物居中

.item {
  margin: 0px auto; /* center */
  width: 1100px;
  height: 500px;
  text-align: center;
}

理论上，这是可行的，但是我们需要知道我们要居中的是什么，在本例中是整个幻灯片，而不是它的内容（您可能希望居中）
因此，最快的解决方案可能如下所示

.item img {
  margin: 0 auto;
}

这与您尝试的方法相同，但应用于需要居中的正确元素-〉幻灯片的内容。
更“健壮”的居中方式是将幻灯片设置为display: flex，并使用flexbox将内容居中。
这样试试

.item {
   width: 1100px;
   height: 500px;
   display: flex;
   justify-content: center; /* horizontal centering */
   align-items: center; /* vertical centering */
}

试试那些，然后告诉我！

赞(0）回复(0）举报 2023-02-17

我来回答

css 如何始终使幻灯片图像居中？

1条答案

相关问题

热门标签

最新问答