[BootStrap 4] Centrer verticalement dans la page

**bobyz** · 29/06/2020, 17h55

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Cyberdome** · 01/07/2020, 10h06

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.

**bobyz** · 02/07/2020, 15h59

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[BootStrap 4] Centrer verticalement dans la page

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager