{"id":165,"date":"2015-03-28T18:59:24","date_gmt":"2015-03-28T17:59:24","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?p=165"},"modified":"2023-02-02T08:34:02","modified_gmt":"2023-02-02T07:34:02","slug":"html-tips-centrer-un-menu-horizontal","status":"publish","type":"post","link":"https:\/\/lamartinieredesign.fr\/?p=165","title":{"rendered":"HTML Tips : Centrer un menu horizontal"},"content":{"rendered":"<p>La m\u00e9thode traditionnelle pour mettre un menu \u00e0 l&rsquo;horizontale est de faire flotter les \u00e9l\u00e9ments de la liste (li). Cela rend tr\u00e8s compliqu\u00e9 le centrage global du menu dans un conteneur. Pour r\u00e9soudre le probl\u00e8me, il faut modifier le comportement des (li) par la propri\u00e9t\u00e9 inline-block qui pr\u00e9sente l&rsquo;avantage de inline (le comportement inline place naturellement les \u00e9l\u00e9ments les uns \u00e0 c\u00f4t\u00e9 des autres) et certains avantages de block (permettre un dimensionnement, des marges, etc.)<\/p>\n<p>Il faut donc au niveau (li) du menu, placer une propri\u00e9t\u00e9 : display: inline-block; On peut centrer le texte dans la bo\u00eete des (li) par text-align: center dans (li). Mais surtout, il faut centrer le contenu de la liste (ul) par text-align: center; ce qui donne l&rsquo;effet souhait\u00e9 car cela centre les (li) compte tenu de leur comportement inline.<\/p>\n<p>Vous pouvez voir le r\u00e9sultat avec le code css largement comment\u00e9 en t\u00e9l\u00e9chargeant le fichier joint :<\/p>\n<p><a href=\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2015\/03\/tutos_HTML.zip\">tutos_HTML<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La m\u00e9thode traditionnelle pour mettre un menu \u00e0 l&rsquo;horizontale est de faire flotter les \u00e9l\u00e9ments de la liste (li). Cela rend tr\u00e8s compliqu\u00e9 le centrage global du menu dans un conteneur. Pour r\u00e9soudre le probl\u00e8me, il faut modifier le comportement des (li) par la propri\u00e9t\u00e9 inline-block qui pr\u00e9sente l&rsquo;avantage de inline (le comportement inline place &hellip; <a href=\"https:\/\/lamartinieredesign.fr\/?p=165\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">HTML Tips : Centrer un menu horizontal<\/span>  <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2],"tags":[],"modified_by":"adm_art_in","_links":{"self":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/posts\/165"}],"collection":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=165"}],"version-history":[{"count":1,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":166,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/posts\/165\/revisions\/166"}],"wp:attachment":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}