Différences

Ci-dessous, les différences entre deux révisions de la page.

--- webdev:html_css:centrage [16/09/2015 16:52] – dolo
+++ webdev:html_css:centrage [02/06/2016 19:08] (Version actuelle) – dolo
@@ Ligne 1: / Ligne 1: @@
+====== Centrage ======
+[[http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html]]\\
+[[http://www.greywyvern.com/?post=323]]\\
+[[https://css-tricks.com/centering-css-complete-guide/]]
+**En cours**
+=== Margin auto ===
+=== Vertical ===
+=== Centrage spécial ===
+<Code:CSS>header > img {
+    display:block;
+    -ms-transform: translate(-50%,0); -webkit-transform: translate(-50%,0);
+    transform: translate(-50%,0);
+    position:relative;
+    left: 50%;
+}</Code>
+[[http://caniuse.com/#search=transform]]
+=== Centrage avec les flexbox ===
+Utile quand l'enfant dépasse de son parent. **Le display flex annule les marges et modifie beaucoup de choses, à éviter !**
+<Code:css>
+parent {
+    display: -webkit-flex; display: -ms-flex;
+    display: flex;
+    -webkit-justify-content: center; -ms-justify-content: center;
+    justify-content: center;
+}
+enfant {
+    -webkit-flex: none; -ms-flex: none;
+    flex: none;
+}
+</Code>
+[[http://caniuse.com/#feat=flexbox|Stats Can I use]]
+=== Centrer un élément absolu ===
+[[http://stackoverflow.com/questions/17976995/how-to-center-absolute-div-horizontally-using-css]]
+<Code:CSS>display: block;
+margin-right: auto;
+margin-left: auto;/* Séparation nécessaire pour IE */
+position: absolute;
+right: 0;
+left: 0;</Code>
+=== Centrage sur toute la page ===
+Il faut adapter la structure de la page pour celui-ci :
+<Code:CSS>html {
+    height: 100%;
+}
+body {
+    height: 100%;
+}
+#centrage-table {
+    height: 100%;
+    width: 500px;/* Doit être fixe */
+    margin: auto;
+    display: table;
+}
+#centrage-cell {
+    height:100%;
+    display:table-cell;
+    vertical-align:middle;
+}</Code>

Notes

Outils pour utilisateurs

Outils du site

Différences

Outils de la page