18073 sujets
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)
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. ?
Modifié par olimann (16 Nov 2013 - 16:49)
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)