Centrer ma DIV qui contient deux DIV
mari0n
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'utilise Bootstrap, j'ai souhaité aligner un titre H3 et une image, j'ai pour cela créé deux DIV. Le souci, c'est que la première DIV qui englobe les deux autres, je n'arrive pas à la centrer par rapport à la page...
Une idée ? :)
J'utilise Bootstrap, j'ai souhaité aligner un titre H3 et une image, j'ai pour cela créé deux DIV. Le souci, c'est que la première DIV qui englobe les deux autres, je n'arrive pas à la centrer par rapport à la page...
<div class="center-block"> <div style="float: left;"> <h3>Auto-formation</h3> </div> <div style="width: 60px; float: left;"> <img src="img/logo-openclassrooms.jpg" class="logo-ocr" alt="Logo OpenClassRooms"> </div> </div>
Une idée ? :)
A voir également:
- Centrer ma DIV qui contient deux DIV
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Nombre de jours entre deux dates excel - Guide
- Sms deux ronds - Forum Xiaomi
- Si cellule contient texte alors ✓ - Forum Excel
1 réponse
Salut,
Au moins deux solutions :
1 - définir une largeur et appliquer la valeur 'auto' pour les marges droite et gauche :
2 - passer le block div en inline-block et appliquer la règle text-align: center; sur le parent :
Bonne journée,
Au moins deux solutions :
1 - définir une largeur et appliquer la valeur 'auto' pour les marges droite et gauche :
<div style="width: 400px; margin-left: auto; margin-right: auto;"> <div style="float: left;"> <h3>Auto-formation</h3> </div> <div style="width: 60px; float: left;"> <img src="img/logo-openclassrooms.jpg" class="logo-ocr" alt="Logo OpenClassRooms"> </div> </div>
2 - passer le block div en inline-block et appliquer la règle text-align: center; sur le parent :
<div style="text-align: center;"> <div style="display: inline-block;"> <div style="float: left;"> <h3>Auto-formation</h3> </div> <div style="width: 60px; float: left;"> <img src="img/logo-openclassrooms.jpg" class="logo-ocr" alt="Logo OpenClassRooms"> </div> </div> </div>
Bonne journée,
