Question

我试图制作自动适合图像尺寸的轮播幻灯片，但我无法将包含图像的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>

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

Answer 1

尝试一下：

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

来自：https://www.w3schools.com/cssref/pr_background-position.asp

轮播无法将图片div放到中心

1 个答案: