轮播无法将图像 div 移到中心

Posted 2023-02-24

【中文标题】轮播无法将图像 div 移到中心

【英文标题】：carousel can't get images div to the center

【发布时间】：2020-01-17 21:19:05

【问题描述】：

我试图制作一个自动适应图像大小的轮播幻灯片，但我无法让包含图像的 div 显示在外部 div 的中间（我试图将 text-align:center 和 margin-左：自动在每个可能的 div 上，但仍然无法使其居中）：

这里是我的 django 模板中的 html，所以忽略 % % 它只是将我的数据输出到模板（包括用于测试的 css 样式，以便我稍后可以放入我的 css 文件）：

<div class="card">
        <div class="card-body" style="text-align: center;">
            <div id="carouselExampleIndicators3" class="carousel slide" data-ride="carousel" style="height: 100%; cursor: pointer; display: table-row; text-align: center; width: 100%;">
                <div style="display: table-cell; vertical-align: middle; width: 100%; border: 0px; text-align: center; height: 100%">
                <ol class="carousel-indicators">
                    % for image in property.images %
                    % if forloop.counter0 == 0 %
                    <li data-target="#carouselExampleIndicators3" data-slide-to=" forloop.counter0 " class="active"></li>
                    % else %
                    <li data-target="#carouselExampleIndicators3" data-slide-to=" forloop.counter0 "></li>
                    % endif %
                    % endfor %
                </ol>
                <div class="carousel-inner">
                    % for image in property.images %
                    % if forloop.counter0 == 0 %
                    <div class="carousel-item active">
                        <img class="d-block w-100" src=" image " style="width: auto !important; height: auto; max-height: 100%; display: inline">
                    </div>
                    % else %
                    <div class="carousel-item">
                        <img class="d-block w-100" src=" image " style="width: auto !important; height: auto; max-height: 100%;display: inline">
                    </div>
                    % endif %
                    % endfor %
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators3" 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="#carouselExampleIndicators3" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
                </div>
            </div>
        </div>
    </div>

我在这个问题上停留了几天，所以任何帮助都会很好！

【问题讨论】：

不要向我们展示 if/else 逻辑的东西，这对我们没有帮助。最好显示 HTML 代码是如何进入浏览器的，同时显示伴随的 CSS。

【参考方案1】：

试试这个：

body 
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;

来自：https://www.w3schools.com/cs-s-ref/pr_background-position.asp

【讨论】：

它不是 div 的背景，它包含图像的轮播，我应该使用哪个 div 那些 css ？

试着告诉我结果。

我在 body 和 outisde div 中尝试过，但它不起作用