Bootstrap и Jinja - центрирование изображений

Я использую Bootstrap3 в моем Django проекте и я хотел бы отображать изображения в ряд рядом друг с другом горизонтально и у меня есть:

<div class="row">
    {% for image in images %}
        {% if image.image %}
                <div class="col-lg-4 col-md-4 col-xs-4 thumb">
                    <img class="img-responsive" src="{{ image.image.url }}" />
                </div>
        {% endif %}
    {% endfor %}
    </div>

и все работает. Но изображения отображаются слева направо (например, если есть только 1 изображение, оно прижато слева, и это выглядит не очень хорошо). Как я могу отцентрировать все изображения, чтобы они всегда были отцентрированы независимо от количества изображений?

Для центрирования списка if блока в главном блоке независимо от количества дочерних блоков, вы можете использовать css flex + justify-content: center подобно этому :

<!-- Without bootstrap -->

<style>
    .images-box {
        display: flex;
        justify-content: center;
      }
</style>

<div class="row images-box">
{% for image in images %}
    {% if image.image %}
            <div class="col-lg-4 col-md-4 col-xs-4 thumb">
                <img class="img-responsive" src="{{ image.image.url }}" />
            </div>
    {% endif %}
{% endfor %}
</div>

<!-- With bootstrap 4 -->

<div class="row d-flex justify-content-center">
{% for image in images %}
    {% if image.image %}
            <div class="col-lg-4 col-md-4 col-xs-4 thumb">
                <img class="img-responsive" src="{{ image.image.url }}" />
            </div>
    {% endif %}
{% endfor %}
</div>

NB : В bootstrap версии 4 вам нужно добавить class="row d-flex justify-content-center" к классу parent div. Если вы вынуждены использовать V3, то попробуйте использовать ванильный css, как описано выше.

Вернуться на верх