我在我的 Django 專案中使用 Bootstrap3，我想水平顯示彼此相鄰的行中的影像，我有：
<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 個影像，則將其固定在左側，看起來不太好）。如何將所有影像居中以始終獨立于影像數量居中？
uj5u.com熱心網友回復：
要在獨立于子塊數量的主塊中將串列 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>
注意：使用引導程式版本 4，您必須將 添加到父 div類。如果您被迫使用，請V3嘗試如上所述的 vanilla css。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/327176.html