GitHub PullRequestReviewCommentEvent at 2014-09-15 11:34:34
Repository: website
Actor: Nyalab
Payload: {"action":"created","comment":{"url":"https://api.github.com/repos/putaindecode/website/pulls/comments/17536845","id":17536845,"diff_hunk":"@@ -0,0 +1,386 @@\n+Centrer en css, c'est la base, et parfois, ce n'est pas si simple. Ce guide vous servira donc pour vous lister les techniques les plus connues pour réaliser ce fameux effet centré.\n+\n+Les principales techniques de centrage en css seront expliquées pendant les premières déclarations, et réutilisées par la suite dans tout le guide, vous pouvez donc avoir un intérêt à lire le guide dans le sens normal de la lecture.\n+\n+Cependant, si vous souhaitez juste avoir le code correspondant à votre problème, vous pouvez utiliser le menu composé d'ancres ci-dessous.\n+\n+## Sommaire\n+\n+* [tl;dr - mes techniques préférées](#tl-dr-mes-techniques-preferees)\n+* [Techniques tradtionnelles](#techniques-traditionnelles)\n+  * [Un bloc dans un bloc](#un-bloc-dans-un-bloc)\n+  * [Des blocs dans un bloc](#des-blocs-dans-un-bloc)\n+  * [Des éléments inlines dans un bloc](#des-elements-inlines-dans-un-bloc)\n+* [Techniques avancées : flexbox(ie11+)](#techniques-avancees-flexbox-a-href-http-caniuse-com-feat-flexbox-ie11-a-)\n+\n+## tl;dr - mes techniques préférées\n+\n+### Un bloc dans un bloc\n+\n+```css\n+.parent {\n+  position: relative;\n+  transform-style: preserve-3d;\n+}\n+\n+.child {\n+  position: relative;\n+  top: 50%;\n+  left: 50%;\n+  transform: translate(-50%, -50%);\n+}\n+```\n+\n+### Des blocs dans un bloc\n+\n+```css\n+.parent {\n+  text-align: center;\n+}\n+ \n+.parent:before {\n+  content: '';\n+  display: inline-block;\n+  height: 100%;\n+  vertical-align: middle;\n+  margin-right: -0.25em;\n+}\n+\n+.child {\n+  display: inline-block;\n+  vertical-align: middle;\n+}\n+```\n+\n+### Des éléments inline dans un bloc\n+\n+```css\n+.parent {\n+  text-align: center;\n+}\n+\n+.child {\n+  vertical-align: middle;\n+}\n+```\n+\n+## Techniques traditionnelles\n+\n+### Un bloc dans un bloc\n+\n+#### Centrage horizontal\n+\n+La technique du `margin: 0 auto;` consiste à dire au browser que les marges de gauche et droite seront identiques et que leur valeur sera `auto`. Le browser calcule donc des marges de même taille de chaque côté et centre le bloc naturellement.\n+\n+```css\n+.parent {}\n+\n+.child {\n+  margin: 0 auto;\n+}\n+```\n+\n+La technique du `left: 50%; + margin négative en unités` est à utiliser sur les blocs dont vous conaissez la taille à l'avance. Le principe consiste à expliquer au navigateur qu'on place un bloc en `position: absolute;`. Celui-ci va donc chercher à se placer par rapport à son élément parent le plus proche qui est en `position: relative;`. Il faut donc ne pas oublier d'attribuer cette propriété sur le `.parent`. Il suffit ensuite d'indiquer qu'on place le bloc à `left: 50%;`. Le bloc se place donc à 50% vers la gauche par rapport à la taille totale du bloc conteneur. Il ne nous reste plus qu'à décaler vers la droite le bloc `.child` en lui donnant une valeur de margin négative vers la gauche. Celle-ci doit être égale à la moitié de la `width`(en pixels, em, rems, pourcentages, ...).\n+\n+```css\n+.parent {\n+  position: relative;\n+}\n+\n+.child {\n+  width: XXXem;\n+  position: absolute;\n+  left: 50%;\n+  margin-left: -(@width/2)em;\n+}\n+```\n+\n+En combinant la technique précédente et des propriétés css modernes, on arrive à la technique du `transform: translate; négatif`. Même principe que la technique précédente, sauf qu'à la fin, on indique au bloc enfant d'effectuer une translation sur lui-même, en suivant l'axe X (l'axe horizontal) de -50%, donc 50% vers la droite. Sauf que ce 50% s'applique sur le bloc enfant directement. Vous n'avez donc pas besoin de connaitre la `width`de l'élément enfant à l'avance. Le `transform-style: preserve-3d;` sur le bloc `.parent` est là pour régler des problèmes de flou sur certains navigateurs lors de transitions.\n+\n+```css\n+.parent {\n+  position: relative;\n+  transform-style: preserve-3d;\n+}\n+\n+.child {\n+  position: absolute;\n+  left: 50%;\n+  transform: translateX(-50%);\n+}\n+```\n+\n+#### Centrage vertical\n+\n+Même principe que la technique `left: 50%; + margin négative en unités`, sauf qu'on applique le principe aux propriétés css relatives à la hauteur. Vous avez donc besoin de connaitre à l'avance la hauteur de votre bloc.\n+\n+```css\n+.parent {\n+  position: relative;\n+}\n+\n+.child {\n+  height: XXXem;\n+  position: absolute;\n+  top: 50%;\n+  margin-top: -(@height/2)em;\n+}\n+```\n+\n+Ici on réutilise le principe expliqué dans la technique `transform: translate; négatif`, mais appliqué à la hauteur. Notez que le nom de la [valeur de la propriété](http://apps.workflower.fi/vocabs/css/fr) css passe de `translateX` à `translateY`.\n+\n+```css\n+.parent {\n+  position: relative;\n+  transform-style: preserve-3d;\n+}\n+\n+.child {\n+  position: absolute;\n+  top: 50%;\n+  transform: translateY(-50%);\n+}\n+```\n+\n+#### Les deux\n+\n+En réutilisant toutes les techniques expliquées précédemment, on peut arriver à plusieurs solutions, à choisir selon votre contexte et vos préférences.\n+\n+Méthode à base de `display: inline-block`\n+\n+```css\n+.parent {\n+  text-align: center;\n+}\n+ \n+.parent:before {\n+  content: '';\n+  display: inline-block;\n+  height: 100%;\n+  vertical-align: middle;\n+  margin-right: -0.25em;\n+}\n+\n+.child {\n+  display: inline-block;\n+  vertical-align: middle;\n+}\n+```\n+\n+\n+Technique des `position: absolute; + marges négatives` avec tailles connues à l'avance\n+\n+```css\n+.parent {\n+  position: relative;\n+}\n+\n+.child {\n+  width: XXXem;\n+  height: XXXem;\n+  position: absolute;\n+  top: 50%;\n+  left: 50%;\n+  margin-left: -(@width/2)em;","path":"src/pages/posts/css/le-guide-complet-pour-centrer-en-css/index.md","position":184,"original_position":184,"commit_id":"76de57c943219740abb4f9e2d94ac6d2a35e5b3f","original_commit_id":"76de57c943219740abb4f9e2d94ac6d2a35e5b3f","user":{"login":"Nyalab","id":721993,"avatar_url":"https://avatars.githubusercontent.com/u/721993?v=2","gravatar_id":"0024021f51ce1fdc50564298e72fbf7c","url":"https://api.github.com/users/Nyalab","html_url":"https://github.com/Nyalab","followers_url":"https://api.github.com/users/Nyalab/followers","following_url":"https://api.github.com/users/Nyalab/following{/other_user}","gists_url":"https://api.github.com/users/Nyalab/gists{/gist_id}","starred_url":"https://api.github.com/users/Nyalab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Nyalab/subscriptions","organizations_url":"https://api.github.com/users/Nyalab/orgs","repos_url":"https://api.github.com/users/Nyalab/repos","events_url":"https://api.github.com/users/Nyalab/events{/privacy}","received_events_url":"https://api.github.com/users/Nyalab/received_events","type":"User","site_admin":false},"body":"hmm, je pense que ça va rendre ça encore plus confus de foutre un var(--), non ? et j'ai pas trop envie de mettre une valeur en dur.\r\n\r\nVous en pensez quoi les autres ? Comment formuler ça pour que ça soit compréhensible que ce soit la valeur / 2 ?","created_at":"2014-09-15T11:34:34Z","updated_at":"2014-09-15T11:34:34Z","html_url":"https://github.com/putaindecode/website/pull/242#discussion_r17536845","pull_request_url":"https://api.github.com/repos/putaindecode/website/pulls/242","_links":{"self":{"href":"https://api.github.com/repos/putaindecode/website/pulls/comments/17536845"},"html":{"href":"https://github.com/putaindecode/website/pull/242#discussion_r17536845"},"pull_request":{"href":"https://api.github.com/repos/putaindecode/website/pulls/242"}}},"pull_request":{"url":"https://api.github.com/repos/putaindecode/website/pulls/242","id":21208648,"html_url":"https://github.com/putaindecode/website/pull/242","diff_url":"https://github.com/putaindecode/website/pull/242.diff","patch_url":"https://github.com/putaindecode/website/pull/242.patch","issue_url":"https://api.github.com/repos/putaindecode/website/issues/242","number":242,"state":"open","locked":false,"title":"Post: Le guide pour centrer en CSS","user":{"login":"Nyalab","id":721993,"avatar_url":"https://avatars.githubusercontent.com/u/721993?v=2","gravatar_id":"0024021f51ce1fdc50564298e72fbf7c","url":"https://api.github.com/users/Nyalab","html_url":"https://github.com/Nyalab","followers_url":"https://api.github.com/users/Nyalab/followers","following_url":"https://api.github.com/users/Nyalab/following{/other_user}","gists_url":"https://api.github.com/users/Nyalab/gists{/gist_id}","starred_url":"https://api.github.com/users/Nyalab/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Nyalab/subscriptions","organizations_url":"https://api.github.com/users/Nyalab/orgs","repos_url":"https://api.github.com/users/Nyalab/repos","events_url":"https://api.github.com/users/Nyalab/events{/privacy}","received_events_url":"https://api.github.com/users/Nyalab/received_events","type":"User","site_admin":false},"body":"Voila la PR, j'attends vos commentaires sur le fond (peut être mettre moins de techniques, peut être plus), sur la forme (j'ai pas forcé sur le ton humoristique, la présentation est peut être pas top avec tous ces blocs de code, le résumé aussi, ...).\r\n\r\nJ'étais parti pour un post en parti-pris au début, puis j'ai listé plusieurs solutions et donné mes préférées, à voir si ça vous va.\r\n\r\nPeut être l'occase de sortir la section \"guides\" et l'inaugurer avec ce genre de posts qui doivent perdurer dans le temps.\r\n\r\nÀ vos reviews les nazes.","created_at":"2014-09-14T21:33:37Z","updated_at":"2014-09-15T11:34:34Z","closed_at":null,"merged_at":null,"merge_commit_sha":"f05c8d7cb859cfdf17f2863e84dc3c40760032d9","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/putaindecode/website/pulls/242/commits","review_comments_url":"https://api.github.com/repos/putaindecode/website/pulls/242/comments","review_comment_url":"https://api.github.com/repos/putaindecode/website/pulls/comments/{number}","comments_url":"https://api.github.com/repos/putaindecode/website/issues/242/comments","statuses_url":"https://api.github.com/repos/putaindecode/website/statuses/76de57c943219740abb4f9e2d94ac6d2a35e5b3f","head":{"label":"putaindecode:post.css-centering","ref":"post.css-centering","sha":"76de57c943219740abb4f9e2d94ac6d2a35e5b3f","user":{"login":"putaindecode","id":4541781,"avatar_url":"https://avatars.githubusercontent.com/u/4541781?v=2","gravatar_id":"c2fefc073172b1bed307fa37fd727e9a","url":"https://api.github.com/users/putaindecode","html_url":"https://github.com/putaindecode","followers_url":"https://api.github.com/users/putaindecode/followers","following_url":"https://api.github.com/users/putaindecode/following{/other_user}","gists_url":"https://api.github.com/users/putaindecode/gists{/gist_id}","starred_url":"https://api.github.com/users/putaindecode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/putaindecode/subscriptions","organizations_url":"https://api.github.com/users/putaindecode/orgs","repos_url":"https://api.github.com/users/putaindecode/repos","events_url":"https://api.github.com/users/putaindecode/events{/privacy}","received_events_url":"https://api.github.com/users/putaindecode/received_events","type":"Organization","site_admin":false},"repo":{"id":10319056,"name":"website","full_name":"putaindecode/website","owner":{"login":"putaindecode","id":4541781,"avatar_url":"https://avatars.githubusercontent.com/u/4541781?v=2","gravatar_id":"c2fefc073172b1bed307fa37fd727e9a","url":"https://api.github.com/users/putaindecode","html_url":"https://github.com/putaindecode","followers_url":"https://api.github.com/users/putaindecode/followers","following_url":"https://api.github.com/users/putaindecode/following{/other_user}","gists_url":"https://api.github.com/users/putaindecode/gists{/gist_id}","starred_url":"https://api.github.com/users/putaindecode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/putaindecode/subscriptions","organizations_url":"https://api.github.com/users/putaindecode/orgs","repos_url":"https://api.github.com/users/putaindecode/repos","events_url":"https://api.github.com/users/putaindecode/events{/privacy}","received_events_url":"https://api.github.com/users/putaindecode/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/putaindecode/website","description":"Oh les jolis articles...","fork":false,"url":"https://api.github.com/repos/putaindecode/website","forks_url":"https://api.github.com/repos/putaindecode/website/forks","keys_url":"https://api.github.com/repos/putaindecode/website/keys{/key_id}","collaborators_url":"https://api.github.com/repos/putaindecode/website/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/putaindecode/website/teams","hooks_url":"https://api.github.com/repos/putaindecode/website/hooks","issue_events_url":"https://api.github.com/repos/putaindecode/website/issues/events{/number}","events_url":"https://api.github.com/repos/putaindecode/website/events","assignees_url":"https://api.github.com/repos/putaindecode/website/assignees{/user}","branches_url":"https://api.github.com/repos/putaindecode/website/branches{/branch}","tags_url":"https://api.github.com/repos/putaindecode/website/tags","blobs_url":"https://api.github.com/repos/putaindecode/website/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/putaindecode/website/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/putaindecode/website/git/refs{/sha}","trees_url":"https://api.github.com/repos/putaindecode/website/git/trees{/sha}","statuses_url":"https://api.github.com/repos/putaindecode/website/statuses/{sha}","languages_url":"https://api.github.com/repos/putaindecode/website/languages","stargazers_url":"https://api.github.com/repos/putaindecode/website/stargazers","contributors_url":"https://api.github.com/repos/putaindecode/website/contributors","subscribers_url":"https://api.github.com/repos/putaindecode/website/subscribers","subscription_url":"https://api.github.com/repos/putaindecode/website/subscription","commits_url":"https://api.github.com/repos/putaindecode/website/commits{/sha}","git_commits_url":"https://api.github.com/repos/putaindecode/website/git/commits{/sha}","comments_url":"https://api.github.com/repos/putaindecode/website/comments{/number}","issue_comment_url":"https://api.github.com/repos/putaindecode/website/issues/comments/{number}","contents_url":"https://api.github.com/repos/putaindecode/website/contents/{+path}","compare_url":"https://api.github.com/repos/putaindecode/website/compare/{base}...{head}","merges_url":"https://api.github.com/repos/putaindecode/website/merges","archive_url":"https://api.github.com/repos/putaindecode/website/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/putaindecode/website/downloads","issues_url":"https://api.github.com/repos/putaindecode/website/issues{/number}","pulls_url":"https://api.github.com/repos/putaindecode/website/pulls{/number}","milestones_url":"https://api.github.com/repos/putaindecode/website/milestones{/number}","notifications_url":"https://api.github.com/repos/putaindecode/website/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/putaindecode/website/labels{/name}","releases_url":"https://api.github.com/repos/putaindecode/website/releases{/id}","created_at":"2013-05-27T17:08:41Z","updated_at":"2014-09-02T16:12:45Z","pushed_at":"2014-09-14T21:31:35Z","git_url":"git://github.com/putaindecode/website.git","ssh_url":"git@github.com:putaindecode/website.git","clone_url":"https://github.com/putaindecode/website.git","svn_url":"https://github.com/putaindecode/website","homepage":"http://putaindecode.fr","size":28440,"stargazers_count":28,"watchers_count":28,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":30,"mirror_url":null,"open_issues_count":24,"forks":30,"open_issues":24,"watchers":28,"default_branch":"master"}},"base":{"label":"putaindecode:master","ref":"master","sha":"a950ba512503746143714d8a62d593d709653578","user":{"login":"putaindecode","id":4541781,"avatar_url":"https://avatars.githubusercontent.com/u/4541781?v=2","gravatar_id":"c2fefc073172b1bed307fa37fd727e9a","url":"https://api.github.com/users/putaindecode","html_url":"https://github.com/putaindecode","followers_url":"https://api.github.com/users/putaindecode/followers","following_url":"https://api.github.com/users/putaindecode/following{/other_user}","gists_url":"https://api.github.com/users/putaindecode/gists{/gist_id}","starred_url":"https://api.github.com/users/putaindecode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/putaindecode/subscriptions","organizations_url":"https://api.github.com/users/putaindecode/orgs","repos_url":"https://api.github.com/users/putaindecode/repos","events_url":"https://api.github.com/users/putaindecode/events{/privacy}","received_events_url":"https://api.github.com/users/putaindecode/received_events","type":"Organization","site_admin":false},"repo":{"id":10319056,"name":"website","full_name":"putaindecode/website","owner":{"login":"putaindecode","id":4541781,"avatar_url":"https://avatars.githubusercontent.com/u/4541781?v=2","gravatar_id":"c2fefc073172b1bed307fa37fd727e9a","url":"https://api.github.com/users/putaindecode","html_url":"https://github.com/putaindecode","followers_url":"https://api.github.com/users/putaindecode/followers","following_url":"https://api.github.com/users/putaindecode/following{/other_user}","gists_url":"https://api.github.com/users/putaindecode/gists{/gist_id}","starred_url":"https://api.github.com/users/putaindecode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/putaindecode/subscriptions","organizations_url":"https://api.github.com/users/putaindecode/orgs","repos_url":"https://api.github.com/users/putaindecode/repos","events_url":"https://api.github.com/users/putaindecode/events{/privacy}","received_events_url":"https://api.github.com/users/putaindecode/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/putaindecode/website","description":"Oh les jolis articles...","fork":false,"url":"https://api.github.com/repos/putaindecode/website","forks_url":"https://api.github.com/repos/putaindecode/website/forks","keys_url":"https://api.github.com/repos/putaindecode/website/keys{/key_id}","collaborators_url":"https://api.github.com/repos/putaindecode/website/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/putaindecode/website/teams","hooks_url":"https://api.github.com/repos/putaindecode/website/hooks","issue_events_url":"https://api.github.com/repos/putaindecode/website/issues/events{/number}","events_url":"https://api.github.com/repos/putaindecode/website/events","assignees_url":"https://api.github.com/repos/putaindecode/website/assignees{/user}","branches_url":"https://api.github.com/repos/putaindecode/website/branches{/branch}","tags_url":"https://api.github.com/repos/putaindecode/website/tags","blobs_url":"https://api.github.com/repos/putaindecode/website/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/putaindecode/website/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/putaindecode/website/git/refs{/sha}","trees_url":"https://api.github.com/repos/putaindecode/website/git/trees{/sha}","statuses_url":"https://api.github.com/repos/putaindecode/website/statuses/{sha}","languages_url":"https://api.github.com/repos/putaindecode/website/languages","stargazers_url":"https://api.github.com/repos/putaindecode/website/stargazers","contributors_url":"https://api.github.com/repos/putaindecode/website/contributors","subscribers_url":"https://api.github.com/repos/putaindecode/website/subscribers","subscription_url":"https://api.github.com/repos/putaindecode/website/subscription","commits_url":"https://api.github.com/repos/putaindecode/website/commits{/sha}","git_commits_url":"https://api.github.com/repos/putaindecode/website/git/commits{/sha}","comments_url":"https://api.github.com/repos/putaindecode/website/comments{/number}","issue_comment_url":"https://api.github.com/repos/putaindecode/website/issues/comments/{number}","contents_url":"https://api.github.com/repos/putaindecode/website/contents/{+path}","compare_url":"https://api.github.com/repos/putaindecode/website/compare/{base}...{head}","merges_url":"https://api.github.com/repos/putaindecode/website/merges","archive_url":"https://api.github.com/repos/putaindecode/website/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/putaindecode/website/downloads","issues_url":"https://api.github.com/repos/putaindecode/website/issues{/number}","pulls_url":"https://api.github.com/repos/putaindecode/website/pulls{/number}","milestones_url":"https://api.github.com/repos/putaindecode/website/milestones{/number}","notifications_url":"https://api.github.com/repos/putaindecode/website/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/putaindecode/website/labels{/name}","releases_url":"https://api.github.com/repos/putaindecode/website/releases{/id}","created_at":"2013-05-27T17:08:41Z","updated_at":"2014-09-02T16:12:45Z","pushed_at":"2014-09-14T21:31:35Z","git_url":"git://github.com/putaindecode/website.git","ssh_url":"git@github.com:putaindecode/website.git","clone_url":"https://github.com/putaindecode/website.git","svn_url":"https://github.com/putaindecode/website","homepage":"http://putaindecode.fr","size":28440,"stargazers_count":28,"watchers_count":28,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":30,"mirror_url":null,"open_issues_count":24,"forks":30,"open_issues":24,"watchers":28,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/putaindecode/website/pulls/242"},"html":{"href":"https://github.com/putaindecode/website/pull/242"},"issue":{"href":"https://api.github.com/repos/putaindecode/website/issues/242"},"comments":{"href":"https://api.github.com/repos/putaindecode/website/issues/242/comments"},"review_comments":{"href":"https://api.github.com/repos/putaindecode/website/pulls/242/comments"},"review_comment":{"href":"https://api.github.com/repos/putaindecode/website/pulls/comments/{number}"},"commits":{"href":"https://api.github.com/repos/putaindecode/website/pulls/242/commits"},"statuses":{"href":"https://api.github.com/repos/putaindecode/website/statuses/76de57c943219740abb4f9e2d94ac6d2a35e5b3f"}}}}