Centrer ma DIV qui contient deux DIV
mari0n
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
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
- Supprimer une conversation messenger pour les deux personnes ✓ - Forum Facebook
- Deux whatsapp sur un téléphone - Guide
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,
