28182 sujets

CSS et mise en forme, CSS3

Centrer un div de grille bootstrap 4.4

Bonjour,

Je n'arrive pas à centrer mon div sans centrer son contenu :
<div class="row row-cols-3">
    <div class="col">texte 1</div>
    <div class="col">texte 2</div>
    <div class="col">texte 3</div>
</div>

en effet si je met un 
style="text-align:center"
après la classe 
class="row row-cols-3"
tout le contenu est centré.
Merci, aurais-tu la même chose sans "forcer" la largeur et la hauteur car l'idée étant de le faire en responsive ?
pour ce qui est du 
margin: 0 auto;
j'ai déjà essayé après ma classe et sans succès. Smiley decu
Modifié par Breat (29 Apr 2020 - 18:49)
Un truc du genre?


.container {
position: relative;
transform: translateX(-50%);
left: 50%;
}


Mais sans erreur de ma part la solution que je t'ai donnée précédemment est responsive ...
Modifié par vzytoi (29 Apr 2020 - 18:56)
Modérateur
Hello, ça veut dire quoi pour toi, "centrer mon div" ?
Tu as 4 <div>, tu veux en faire quoi ?

Si c'est simplement avoir le <div> parent qui contient les 3 autres simplement avec de l'espace à gauche et à droite, tu peux simplement emballer le tout dans un <div class="container"> (class qui vient de Bootstrap pour faire exactement ça)

Smiley smile
Oui c'est ce que je veux faire et malheureusement ça ne fonctionne pas car tout mon contenu (<body></body>) est déjà dans un div ayant cette classe.

probablement car j'ai "personnalisé" cette classe comme ceci :
.container {
    margin: auto;
    min-width: 100%;
}
Je ne pense pas qu'il soit judicieux de modifier le classe bootstrap, si tu veux un résultat différent de ce que propose bootstrap créer plutôt ta propre classe.
Modérateur
Effectivement, ce n'est peut-être pas une bonne idée de modifier cette class.

Un moyen serait par exemple de changer tes <div class="col"> par des <div class="col-2"> pour réduire la taille des columns et ensuite ajouter une margin sur la première column : 
<div class="row">
    <div class="col-2 offset-3">texte 1</div>
    <div class="col-2">texte 2</div>
    <div class="col-2">texte 3</div>
</div>


Ce qui va dire que sur tes 12 columns de ta grid, les premiers 3/12ème seront vides, puis tes trois <div> prendront 2/12ème chacun, puis forcément les deniers 3/12 seront vides.

Si tu veux que cela soit responsive, je te conseille ce poste qui décrit tout ça
Yordi a écrit :
Effectivement, ce n'est peut-être pas une bonne idée de modifier cette class.

Un moyen serait par exemple de changer tes &lt;div class="col"&gt; par des &lt;div class="col-2"&gt; pour réduire la taille des columns et ensuite ajouter une margin sur la première column : 
&lt;div class="row"&gt;
    &lt;div class="col-2 offset-3"&gt;texte 1&lt;/div&gt;
    &lt;div class="col-2"&gt;texte 2&lt;/div&gt;
    &lt;div class="col-2"&gt;texte 3&lt;/div&gt;
&lt;/div&gt;


Ce qui va dire que sur tes 12 columns de ta grid, les premiers 3/12ème seront vides, puis tes trois &lt;div&gt; prendront 2/12ème chacun, puis forcément les deniers 3/12 seront vides.

Si tu veux que cela soit responsive, je te conseille ce poste qui décrit tout ça

Cette solution fait exactement ce que je veux pour 2 colonnes mais pour 3, 4, 5 ou 6 (ça dépend des pages) ça marche pas en remplaçant le col-2 par col-3 etc...

Oui modifier la classe de base de bootstrap c'était pas terrible comme idée lol mais maintenant c'est trop tard car toutes mes pages sont faites sur le même modèle donc pas trop envie de toutes les modifier 1 par 1. (Note pour moi plus tard : pas touche aux classes de bases)

A la base mon problème était le suivant :
J'essaie de faire une liste en ligne, justifiée (prenant donc 100% de la largeur) et avec retour automatique après X éléments.

J'ai réussit à le faire avec un tableau mais ça me semble un peu lourd comme code :
<table style="width:100%">
    <tr>
        <td><a href="">texte 1</a></td>
        <td><a href="">texte 2</a></td>
        <td><a href="">texte 3</a></td>
        <td><a href="">texte 4</a></td>
        <td><a href="">texte 5</a></td>
        <td><a href="">texte 6</a></td>
    </tr>
    <tr>
        <td><a href="">texte 7</a></td>
        <td><a href="">texte 8</a></td>
        <td><a href="">texte 9</a></td>
        <td><a href="">texte 10</a></td>
        <td><a href="">texte 11</a></td>
        <td><a href="">texte 12</a></td>
    </tr>
</table>

J'ai essayé de bootstrap ce code :
<ul class="list-inline">
    <li class="list-inline-item"><a href="">texte 1</a></li>
    <li class="list-inline-item"><a href="">texte 2</a></li>
    <li class="list-inline-item"><a href="">texte 3</a></li>
</ul>

Ce qui donne bien une liste en ligne mais pas justifiée et pour le retour à la ligne il faut que j'ajoute des <br /> ce qui n'est pas très propre Smiley smile

J'ai ensuite essayé :
<p style="display:flex;justify-content:space-between;">
    <a href="">texte 1</a>
    <a href="">texte 2</a>
    <a href="">texte 3</a>
    <a href="">texte 4</a>
    <a href="">texte 5</a>
    <a href="">texte 6</a>
</p>

Là c'est bien en ligne et justifié mais impossible de faire un retour à la ligne avec des <br /> par exemple.

Puis j'ai penser à ma solution présente dans le 1er post de ma demande, ce qui était parfait sauf que en fonction du nombre de colonnes il y a un espace à droite bien plus grand que celui de gauche et ça fait moche donc ça me plait pas xD
Modifié par Breat (30 Apr 2020 - 14:51)
Sujet clos
Aller à