18007 sujets

Questions générales et questions de débutants

[Résolu] Aligner a gauche un bloc centré avec flex

Bonjour, je souhaiterais aligner un bloc au centre de ma page tout en alignant ces éléments sur la gauche (comme sur cet exemple).
J'ai essayé pas mal de choses différentes avec flex, pas de soucis pour l'aligner mais impossible de l'aligner sur la gauche...
Si quelqu'un sait comment faire, je suis preneur !
Administrateur
Hello,

L'alignement à gauche est celui par défaut au sein d'un flex-container, donc il ne devrait pas y avoir de souci.

As-tu plus d'info à donner ? Un code, ? Un exemple concret ?
Bien sûr,

dans mon html :
<div id="search">
    <div id="oui">
        <h2 class="frenchbeige latobold">Lorem ipsum dolor sit amet</h2>
    </div>
    <div id="searchfields">
        <input type="text" name="recherche">
        <input id="inputlieu" type="text" name="lieu">
        <input type="submit" value="Rechercher">
    </div>
</div>


Mon css : 

#searchfields, #oui {
  display: flex;
  align-items: center;
  justify-content: center;
}


Et voici ce que j'obtiens : http://prntscr.com/np8re6

Mon objectif est de réussir à aligner sur la gauche mon lorem et mon champs (name=recherche) tout centrant le tout sur la page
Administrateur
OK.

Finalement ton objectif est tout simplement centrer le div parent (#search).

Je te propose dans ce cas de supprimer les styles que tu as appliqués sur #searchfields et #oui et de remplacer par :

#search {
  width: 50vw;
  margin: auto;
}


Pas besoin de Flexbox pour centrer horizontalement une boîte, les marges automatiques font ça très bien Smiley cligne
Super, sur le principe on est bon mais le soucis est que ma div #searchfields est plus grande que la place que mes champs prennent donc pas totalement centré. (http://prntscr.com/np9wmj)

J'imagine que c'est un truc tout simple mais je n'arrive pas à lui donner la taille exacte que prenne mes champs et mon bouton.

Si tu as une solution ?
Administrateur
OK, tu as globalement deux solutions pour cela :

1- rester en modèle block, bénéficier des marges automatiques et passer la largeur à "fit-content" :

#search {
  width: fit-content;
  margin: auto;
}


Seul petit hic : ce n'est actuellement pas compatible sur IE/Edge : https://caniuse.com/#feat=intrinsic-width

2- passer en modèle inline-* (inline-block par exemple), mais tu ne pourras plus profiter des margin auto, il faudra que le parent centre la boîte #search :


.parent-de-search {
  text-align: center;
}
#search {
  display: inline-block
  text-align: left; /* pour rétablir l'alignement à gauche */
}


Bonne nouvelle : ce sera compatible partout Smiley smile
Modifié par Raphael (24 May 2019 - 14:33)
Meilleure solution
Sujet clos
Aller à