【发布时间】：2021-06-30 06:05:48
【问题描述】：
我的网络应用程序在 Django 上运行，我目前正在前端工作。目前看起来是这样的。
我正在尝试将 3 张图片水平和垂直居中，调整为页面中间的合理尺寸。我希望它反应灵敏。这是已记录的 HOST 类别的主页，当登录为 TENANT 时，他只有 2 张图片，我希望这些图片相对于窗口大小居中。
这是我的带有一点 Django 逻辑的 html：
{% extends 'milk_app/base.html' %}
{% load static %}
<!DOCTYPE html>
{% block title_block %}
Homepage
{% endblock %}
{% block body_block %}
<!-- Home page for Hosts -->
{% if user.userprofile.account == "Host" %}
<div class="container">
<div class="row">
<!-- Scroll other properties -->
<div class="center-block col-4">
<a href="{% url 'milk_app:browse_listings' %}"><img class="img-responsive img-center" src="{% static 'images/scroll-others.jpg' %}">
<h4>Scroll all properties</h4>
</a>
</div>
<!-- Transfers HOST user to a page where he can add a new listing -->
<div class="center-block col-4">
<a href="{% url 'milk_app:add_listing' %}"><img class="img-responsive img-center" src="{% static 'images/listing-property.jpg' %}">
<h4>Create a new listing</h4>
</a>
</div>
<!-- Refers the HOST user to the page where he sees all his currently enlisted and also rented out properties -->
<div class="center-block col-4">
<a href="{% url 'milk_app:my_listings' %}"><img class="img-responsive img-center" src="{% static 'images/your-properties.jpg' %}">
<h4>Show your rented properties</h4>
</a>
</div>
</div>
</div>
<!-- Home page for Tenants (not the beer) -->
{% elif user.userprofile.account == 'Tenant' %}
<div class="container">
<div class="row">
<!-- Scroll other properties-->
<div class="center-block col-4">
<a href="{% url 'milk_app:browse_listings' %}"><img class="img-responsive img-center" src="{% static 'images/scroll-others.jpg' %}">
<h4>Scroll all properties</h4>
</a>
</div>
<!-- Check user's currently rented properties-->
<div class="center-block col-4">
<a href="{% url 'milk_app:my_listings' %}"><img class="img-responsive img-center" src="{% static 'images/listing-property.jpg' %}">
<!-- If user has any, refers them to those -->
{% if user. %}
<!-- If does not have any, refers them to their homepage with an error message -->
{% else %}
{% endif %}
<h4>Check out your own rentals</h4>
</a>
</div>
</div>
</div>
<!-- Home page for not logged users -->
{% else %}
<div class="container">
<div class="row">
<!-- Scroll other properties-->
<div class="col-4 img-container">
<a href="{% url 'milk_app:browse_listings' %}"><img class="img-responsive img-center" src="{% static 'images/scroll-others.jpg' %}">
<h4>Scroll all properties</h4>
</a>
</div>
</div>
</div>
{% endif %}
{% endblock %}
这是链接的 CSS 文件：
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
.navbar-nav {
position: relative;
background-color: #333;
overflow: hidden;
}
.jumbotron-heading {
font-size: 40px;
text-align: center;
}
.img-center {
margin:0 auto;
}
a:link {
color:#000;
text-decoration: none;
}
a:visited {
text-decoration: none;
decoration: none;
}
.img-container {
text-align: center;
display: block;
width: 100%;
height: 100 %;
margin: auto;
}
.container {
height: 800px;
width: 400px;
display: table;
}
.container .center-block {
text-align: center;
vertical-align: middle;
display: table-cell;
}
h4 {
text-align: center;
font-size: 20px;
font-weight: bold;
}
footer {
position: fixed;
float: right;
width: 100%;
height: 5%;
color: #000;
text-align: left;
padding: 10px 30px;
font-size: 1em;
text-align: center;
overflow: none;
}
.footer-href {
float: right;
margin-left: 1%;
color: #000;
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
}
.container {
position:absolute;
width:100%;
height:100%;
text-align: center;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: rgb(50, 149, 206);
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
header {
margin: 0;
padding: 0;
}
body{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: contain;
background: url("/static/images/background-image.jpg") no-repeat, no-repeat;
width: 100%;
height: 100%;
max-width: 100%;
height: auto;
}
我通过 img-responsivem、center-block 和许多其他类尝试了我发现的每一件事。我尝试手动对齐它，但效果不佳。接下来我可以尝试什么？
【问题讨论】：
-
您使用的是哪个引导程序版本？
-
引导 v4.2.1
标签： html css django twitter-bootstrap