Est-il possible de centrer un élément plus large que son parent et positionné de manière absolue sans Javascript?

BASE HTML / CSS – JSFiddle : https://jsfiddle.net/tae8pc1g/2/

Tout dans le titre vraiment. Tous les codes importants du JSFiddle sont les suivants:

Menu Button  This is
 some example
 dynamic
 content

CSS

 .example-button { position: relative; display: inline-block; } .example-menu { position: absolute; display: inline-block; top: 100%; }

En utilisant uniquement HTML et CSS, est-il possible de centrer .example-menu rapport à la largeur de .example-button même si elle est plus large que .example-button ?

Oui, il est possible d’utiliser:

1- Pour une largeur inconnue:

 left: 50%; transform: translateX(-50%);

2- Pour largeur connue:

 left: 50%; margin-left: -(width/2)

Voici un JSFiddle au travail avec lequel jouer

 body { text-align: center; } .example-button { position: relative; padding: 15px; border-radius: 5px; background: gray; display: inline-block; text-align: left; } .example-menu { position: absolute; display: inline-block; top: 100%; background: blue; margin:0; padding: 10px 70px; list-style: none; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

 Menu Button  Please
 center
 me!

Cela peut être considéré comme un hack, mais en utilisant du CSS pur, vous pouvez mettre ceci sur votre classe example-button:

 left: 50%; transform: translateX(-50%);

Voir https://jsfiddle.net/08fqfhum/

Remarque: cela ne fonctionnera pas sur les anciens navigateurs (IE8) car il utilise des transformations CSS. Et pour certains navigateurs tels que Safari, vous devez également append une version préfixée de la propriété de transformation:

 -webkit-transform: translateX(-50%);