html - 如何将 Bootstrap div 图像垂直和水平居中
问题描述
我的网络应用程序在 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 和许多其他类尝试了我发现的每一件事。我尝试手动对齐它,但效果不佳。接下来我可以尝试什么?
解决方案
我给你留下了一个对我有用的代码
我希望它对你有用
问候
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body >
<div class="m-0 vh-100 bg-danger row justify-content-center align-items-center">
<div class="col-auto p-5 text-center">
<img src="https://res.cloudinary.com/dov1rrrux/image/upload/f_auto,q_auto:best/v1601822662/cazzcode/PWA_uz1dec.webp" alt="image" class="img-fluid" width="25%">
<img src="https://res.cloudinary.com/dov1rrrux/image/upload/q_auto/v1609636707/cazzcode/logs2_xkcin5.webp" alt="image" class="img-fluid" width="25%">
<img src="https://res.cloudinary.com/dov1rrrux/image/upload/q_auto:best/v1601599018/cazzcode/tesla_r83xsr.webp" alt="image" class="img-fluid" width="25%">
</div>
</div>
</body>
</html>
推荐阅读
- php - 如何在 json (PHP) 中查看欧元符号
- r - 使用 R,验证速率 λ = 10 的泊松过程
- php - 使用变量扩展关联数组
- java - 如何使用 Java 在 Firestore 中创建嵌套字段?
- gitlab - Gitlab Runner 注册失败
- android - 线性布局在滚动视图中不起作用?
- javascript - 如何在 React js 中导出全局对象
- javascript - 返回嵌套树中的匹配节点:Javascript
- spring-boot - JPA Repository.findByKeyEquals() 返回不存在的值,但该值存在于 db
- javascript - 根据键更新数组中嵌套对象的值