堆栈内存溢出
  简体   繁体   English

如何垂直和水平居中引导 div 图像

[英]how to center a bootstrap div image vertically and horizontally

 原文  2021-04-03 19:21:29  2   2    html/ css/ django/ twitter-bootstrap

问题描述

My web app runs on django and I'm currently working on the front-end.我的 web 应用程序在 django 上运行，我目前正在前端工作。 It looks like this at the moment.目前看起来是这样的。

网络

I'm trying to get the 3 pictures centered both horizontally and vertically into some reasonable size into the middle of the page.我试图让 3 张图片水平和垂直居中到页面中间的合理尺寸。 I want it to be responsive.我希望它反应灵敏。 This is a home page for a logged category of HOST, when logged as TENANT, he has only 2 pictures there, which I want to have centered as well relative to the window size.这是已记录的 HOST 类别的主页，当登录为 TENANT 时，他只有 2 张图片，我希望相对于 window 大小居中。

Here is my html with a bit of django logic:这是我的 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 %}

And here's the css file linked:这是 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;
}

I tried out every single thing I found, through classes like img-responsivem, center-block and many others.我通过 img-responsivem、center-block 和许多其他类尝试了我发现的每一件事。 I tried aligning it manually but that did not work as well.我尝试手动对齐它，但效果不佳。 Any help fellas?有帮助的小伙伴吗？

2 个解决方案

解决方案1
 0  2021-04-03 20:43:27

If you are using Bootstrap v4.2.1- You can do this by adding some bootstrap classes for example.如果您使用的是 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>

解决方案2
 0  2021-04-03 21:27:53

I leave you a code that has worked for me我给你留下了一个对我有用的代码

I hope it is useful for you我希望它对你有用

Regards问候

 <: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.

相关问题 如何将图像水平和垂直居中在div中 - How to center image in a div horizontally and vertically 如何在div中垂直和水平居中放置图像 - How to center an image both vertically and horizontally in a div 将图像垂直和水平居中 - center an image in div vertically and horizontally 如何水平和垂直居中放置图像 - how to center image horizontally and vertically 如何在div内水平和垂直居中放置图像和文本？ - How can I center an image and text horizontally and vertically inside a div? 如何在较小的 div 内制作图像中心（垂直和水平） - How to make an image center (vertically & horizontally) inside a smaller div 如何将图片放在div的顶部（水平居中，垂直居中，居中） - How to put an image on top of a div (center horizontally but top vertically, in the middle) 在Bootstrap网格中垂直和水平居中图像 - Center Image Vertically and Horizontally in Bootstrap Grid 在div内水平和垂直居中对齐图像 - Center align image inside div horizontally and vertically 将图像垂直和水平对齐到 div 的中心 - aligning image to be in the center of the div vertically and horizontally
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM