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 //
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>