[BootStrap 4] Centrer verticalement dans la page

Version imprimable

Bonjour,

J'ai essayé plusieurs méthode pour mettre ce bloc au centre de la page de façon vertical mais rien ne fonctionne (align-items-center, align-self-center). A l'horizontale aucun problème mais à la verticale ça ne veut pas!

Si quelqu'un à une solution car la je bloque totalement. Sinon je le ferais en pure CSS. Mais doit y avoir une solution avec boostrap.

Dans le block body, il y as une image et du texte.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{% block title %}Hello city{% endblock %}</title>
        {% block stylesheets %}
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        {% endblock %}
    </head>
    <body >
        <div class="d-flex flex-column">           
            <div class="text-center">                 
 
            {% block body %}{% endblock %}      
 
        <footer>
            <p>
               &copy; Copyright {{ 'now'|date("Y") }}
               &middot; <a href="{{ path('app_about') }}">About us</a>
            </p>
        </footer>
 
            </div>
        </div>
 
        {% block javascripts %}{% endblock %}
    </body>
</html>

Merci d'avance pour le coup de main

01/07/2020, 10h06
Cyberdome

Le positionnement se fait en css et tu ne fournis que le html donc c'est difficile de t'aider. En l'état tu peux déjà vérifier s'il n'y a pas un conflit dans le css entre la class="d-flex flex-column" et la class="text-center" ainsi que le footer si jamais une propriété lui est appliquée directement, et qui empêcherai le positionnement voulu. Le bloc que tu veux centrer hérite peut être des propriétés d'un bloc parent qui empêche son positionnement au centre.

Bonjour,

Problème résolue. J'avais vraiment mal cherché.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>{% block title %}Hello city{% endblock %}</title>
        {% block stylesheets %}
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        {% endblock %}
    </head>
    <body class="container d-flex text-center flex-column ">        
        <div class="bloc m-auto">        
            {% block body %}{% endblock %}                      
        </div>
        <footer class="fixed-bottom">
            <p >
            &copy; Copyright {{ 'now'|date("Y") }}
            &middot; <a href="{{ path('app_about') }}">About us</a>
            </p>
        </footer>
 
        {% block javascripts %}{% endblock %}
    </body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
{% extends "base.html.twig" %}
 
{% block title %}Hello city!{% endblock %}
 
{% block body %}
 
    <img src="{{ asset('/img/drapeau-francais.jpg') }}" alt="french flag" width="25%">
 
    <h1>Bonjour de France</h1>
 
    <p>Il est {{ 'now'|date('h:i A', 'Europe/Paris') }}.</p>
 
     <!-- carte meteo -->
    <div class="row">   
    <div id="carte_7651fb2b5f75916ac3cab05501b10eb4" class="m-auto">
        <a href="http://www.mymeteo.info/r/france_00" title="temps aujourd'hui France"><img src="https://services.my-meteo.com/assets_webmaster/cartes/c.gif" alt="temps aujourd'hui France" height="1" width="1" /></a>
        <script type="text/javascript">
            (function() {
            var my = document.createElement("script"); my.type = "text/javascript"; my.async = true;
            my.src = "https://services.my-meteo.com/cartes/js?pays=france&periode=24&x=445&y=435&d=0&id=7651fb2b5f75916ac3cab05501b10eb4";
            var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(my, z);
            })();
        </script>
    </div>
    <!-- carte meteo -->
    <div id="carte_b733c99ee44635ba8b7e936bc7da411d">
        <a href="http://www.mymeteo.info/r/france_00" title="France en savoir plus"><img src="https://services.my-meteo.com/assets_webmaster/cartes/c.gif" alt="France en savoir plus" height="1" width="1" /></a>
        <script type="text/javascript">
            (function() {
            var my = document.createElement("script"); my.type = "text/javascript"; my.async = true;
            my.src = "https://services.my-meteo.com/cartes/js?pays=france&periode=48&x=450&y=430&d=0&id=b733c99ee44635ba8b7e936bc7da411d";
            var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(my, z);
            })();
        </script>
    </div>
</div>
    <!-- carte meteo -->
 
 
 
{% endblock %}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% extends "base.html.twig" %}
 
{% block title %} About us | {{ parent() }} {% endblock %}
 
{% block body %}
 
<img src="{{ asset('/img/stick-people-5334880_1920.png') }}" class="mt-3" alt="stick people" width=25%>
 
    <h1 class="mt-5">Construit avec <span class="text-danger display-2 "> &hearts; </span> par fpodev.</h1>
 
    <p><a href="{{ path('app_home') }}">Revenir à la page d'accueil</a></p>
 
 
{% endblock %}

Merci pour votre aide.