Bonjour, j'ai un problème, je n'arrive pas à centrer dans mon footer ma div, j'ai un iframe qui contient un maps qui prend la motié du footer, et j'arrive pas à centrer mes blocs dans l'autre moitié du footer, povuez-vous m'aider svp

Voici mon code

// HTML.twig//

<footer>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2912.425742834592!2d5.846917714956656!3d43.11658179498256!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12c90541cde6ad77%3A0xdfe115ca1099886a!2sAssociation%20GEM%20CoeZion!5e0!3m2!1sfr!2sfr!4v1679496856362!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
<div class= "tailleblocfooter">
<p class ="footerallign2">
876 Chemin de la farlède,</br>
Bâtiment le Marigot </br>
83500 La Seyne-Sur-Mer
</p>

        <div class="blocfooter">
            <h1>
                <a class="tailleafooter"  href class="souligner" ="/fr/contact">Contact></a>
                Nous soutenir
            </h1>
            <a href ="https://www.facebook.com/groups/227939872752410" target="_blank" >
                <img class ="c1" src="{{ asset('images/facebook.png') }}"  title="insérer le titre" alt="GEM Coezion"> 
            </a>
            <div class ="c2">
                <img src="{{ asset('images/rugby.png') }}" alt="foot"/> 
            </div>  
        </div>
    </div>

</footer>

//HTML.TWIG //

// CSS //

footer{
background-color: blue;
display: flex;
}

iframe {
display: block;
border: none;
}

.tailleblocfooter{
align-items: center;
justify-content: center;
margin-top: auto;
font-size:x-large;

.footerallign2{
    border: 5px solid black; 
    padding: 10px;
    border-color: black;
}

}

.blocfooter {
grid-area: bloc3;
.tailleafooter{
font-size: xx-large;
grid-area: bloc3;
.souligner{
text-decoration: none;
}
}
.c1{
width : 30px;
height: 30px;
}
.c2{
margin-block-end: 50px;
}
}

.btn-container{
margin-block-end: 200px;
}

.center{
display:flex;
text-align:center;
}

@media screen and (max-width: 768px) {
footer{
flex-direction: column;
}
iframe{
width: 100%;
}
.tailleblocfooter{
margin-left: 25%;

}
    .blocfooter{
        align-items: center;
        justify-content: center;
    }

}

// FIN CSS //

1 réponse


Bonjour, pour centrer dans une div, vous pouvez utiliser ce style :

.box{
display:flex;
justify-content:center;
align-items:center;
min-height:95vh;
}

et entourer votre div de
<div class="box>

  <div>
   Votre contenu
   </div>

</div>