[英]how to center a bootstrap div image vertically and horizontally
我的 web 應用程序在 django 上運行,我目前正在前端工作。 目前看起來是這樣的。
我試圖讓 3 張圖片水平和垂直居中到頁面中間的合理尺寸。 我希望它反應靈敏。 這是已記錄的 HOST 類別的主頁,當登錄為 TENANT 時,他只有 2 張圖片,我希望相對於 window 大小居中。
這是我的 html 和一點 django 邏輯:
{% 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 和許多其他類嘗試了我發現的每一件事。 我嘗試手動對齊它,但效果不佳。 有幫助的小伙伴嗎?
如果您使用的是 Bootstrap v4.2.1 - 例如,您可以通過添加一些引導類來做到這一點。
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<!-- Scroll other properties -->
<div class="center-block">
<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">
<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">
<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>
我給你留下了一個對我有用的代碼
我希望它對你有用
問候
<: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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.