18073 sujets

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

Square fluid

Bonjour,

Petite question :
Est-il possible de centrer un élément enfant dans un div parent (.square) utilisant la méthode ci-dessous ? 


.square{
    width: 50%;
    height: 0;
    padding-bottom: 50%;
}


Merci
Modifié par olimann (15 Nov 2013 - 18:13)
Bonjour,

ta méthode ne peut pas fonctionner car ton padding va se servir de la largeur du parent comme reference.
L'astuce pour faire un carré fluid , c'est de te servir d'un pseudo element , ou d'un element enfant vide pour donner une hauteur a son parent.

1) je donne une largeur à une boite vide (qui n'est pas en display:inline;)

2) j'insere un element (qui n'est pas en display:inline;) auquel je donne un padding vertical de 100% (ses 100% seront la largeur du parent) , ou j'injecte un pseudo-element :after ou :before. j'applique un vertical-align:middle;

2.1) Note, que si le parent a une largeur définie autre qu'en % , un line-height équivalent a la largeur suffit a centré un texte une image ou une boite en ligne.Cas d'un carré qui a une taille fixe.

3) je formate cette element
3.1) en display:inline-block si je veux centré un texte Pour une boite en ligne ou une image il faudra leur donner un vertical-align:middle; aussi. Dans ce cas , si la boite est trop petite, le contenu deborde

3.2) en display:table-cell si je veux centré une boite qui contient une architecture HTML composée d’élément de type block. Dans ce cas on formate le parent en display:table ou inline-table selon ... Cette méthode permet a la boite de se déforme tant en largeur qu'en hauteur si le contenu a besoin de plus d'espace.

code pour voir et jouer avec : http://codepen.io/anon/pen/cvzuh

<edit> En fait, ce n'est pas une astuce, mais le comportement attendues des margin ou padding verticaux exprimés en pourcentage :
http://www.w3.org/TR/CSS2/box.html#margin-properties
http://www.w3.org/TR/CSS2/box.html#padding-properties

pour le centrage vertical il peut s'effectuer
- dans un <td> ou un element formaté comme tel
- sur du texte ou element en ligne par rapport au line-height
- entre plusieurs boite en lignes au coté de texte ou pas.
Modifié par gc-nomade (15 Nov 2013 - 22:45)
Merci pour toutes ces précisions, j’étudie l'affaire.

Je pourrais aussi tricher en utilisant une image pour définir une certaine hauteur. ?

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

.enfant {
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

Modifié par olimann (16 Nov 2013 - 16:49)
olimann a écrit :
Merci pour toutes ces précisions, j’étudie l'affaire.

Je pourrais aussi tricher en utilisant une image pour définir une certaine hauteur. ?

img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

.enfant {
    height: 100px;
    width: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

oui, c'est la bonne vielle méthode brutale que tout le monde comprend.
Modifié par gc-nomade (16 Nov 2013 - 17:24)
Sujet clos
Aller à