Centrage d'un inline-block

Bonjour à tous
Depuis une récente discussion, j'ai modifié le CSS de mes balises <figure> pour le mettre en display:inline-block.
Problème: si je tiens à ce qu'une <figure> soit centrée horizontalement et que je lui donne comme marges margin-left:auto;margin-right:auto; ma <figure> reste cadrée à gauche, en d'autre termes les propriétés margin ne sont pas prises en compte.
Par contre si je la mets en display:block; elle est correctement centrée.
Exemple: l'image en haut de la page http://tests.osirisnet.net/tombes/nobles/roy/e_roy_01.htm
Quelqu'un peut il m'expliquer ce qui se passe et ce qu'il convient de faire pour résoudre ce problème?

Merci de votre aide.

Bonjour !

Un 'inline-block' se comporte comme un inline... par rapport à son environnement. Il ne peut être centré par des marges, il se comporte comme du texte qui, par défaut, est justifié à gauche...

Une recherche sur ce site me dit ... que ce n'est pas faisable sans mettre un text-align:center dans le parent.
Alors reprenons le problème:
1) je veux que ma balise <figure> s'adapte à la taille de l'image qu'elle contient
2) je veux que ma balise <figure> soit centrée horizontalement dans la page
3) si je mets

figure{display:block;margin:auto;}

elle est bien centrée dans la page mais ne s'adapte pas à la taille de l'image
4) si je mets

figure{display:inline-block;margin:auto;}

elle s'adapte à la taille de l'image mais ne se centre pas
5) la balise enveloppante contient beaucoup d'autres choses qui ns sont pas centrées, donc je ne peux pas mettre text-align:center; dans cette balise

Y a-t-il une solution CSS, je veux dire sans ajouter une balise HTML du genre

<div style:"text-align:center;">
    <figure style="display:inline-block;">
        <img ...../>
    </figure>
</div>

Edit; ...ce qui est la solution que j'ai adoptée pour le moment, heureusement que tout ce code est généré par Javascript!
Modifié par PapyJP (24 Jul 2016 - 11:35)

PapyJP a écrit :

display:table ? c'est de là que je suis parti mais on ne peut pas mettre de padding dans une table, seulement dans une cellule.

Erf, encore une condition ?

En fait pour ce qui est du padding, cela fonctionne sur une table (la preuve est que j'ai bien un padding de 1rem sur ma <figure> dans mon lien codepen. Cela fonctionne aussi sur une cellule de tableau, par contre cela ne fonctionne pas sur des rangées (<tr> ou display: table-row).

Bref, le padding fonctionne. Et au pire si tu veux l'émuler, tu peux toujours te servir de la propriété "border-spacing" sur le table.

Raphael a écrit :

Erf, encore une condition ?

En fait pour ce qui est du padding, cela fonctionne sur une table (la preuve est que j'ai bien un padding de 1rem sur ma &lt;figure&gt; dans mon lien codepen. Cela fonctionne aussi sur une cellule de tableau, par contre cela ne fonctionne pas sur des rangées (&lt;tr&gt; ou display: table-row).

Bref, le padding fonctionne. Et au pire si tu veux l'émuler, tu peux toujours te servir de la propriété "border-spacing" sur le table.

Merci de ces infos, je pense que je vais m'en servir plus tard, mais c'est assez pour aujourd'hui...

Raphael a écrit :
Il existe encore une solution via "min-content" que tu peux voir ici : http://codepen.io/raphaelgoetter/pen/PzZjOJ?editors=1100

Vraiment pas mal le min-content, dommage pour la compatibilité actuelle...


Une autre solution (un peu dégue pour un truc si simple, mais en même temps avec autant de conditions... )

figure{
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

@yordi
La volià, la solution que je cherchais!
Comment n'y ai-je pas pensé moi même ?
Merci beaucoup!

PapyJP a écrit :
La volià, la solution que je cherchais!

Elle est effectivement astucieuse. Par contre pour ma part, je réserve ce genre de solutions que dans les cas extrêmes (comme tu le dis, quand il y a vraiment beaucoup de conditions à gérer).

Ceci dit, pour avoir testé sur ta page PapyJP, la solution de display: table; fonctionne très bien aussi, sans sortir du flux, et avec du padding.

EDIT : finalement, d'après mon test, la technique du transform ne fonctionne pas telle quelle : http://codepen.io/raphaelgoetter/pen/PzZjOJ?editors=1100
(il faut sans doute sortir du flux pour que cela fonctionne : position: absolute et non relative)
Modifié par Raphael (25 Jul 2016 - 09:17)

Bon! Confiance aux experts!
Je vais en rester où j'en suis sur ce point.

J'aurais sans doute dû en rester au display:table; mais je suis perdu dans le fait que d'un côté un display:table accepte le padding (ce qui est cohérent avec le HTML à l'ancienne et ses "cellpadding") et le fait que display:inline-table ne l'accepte pas. De même avec margin:auto; qui marche très bien avec table mais pas avec inline-table pour autant que je comprenne.

Il y a sans doute de très bonnes raisons pour qu'il en soit ainsi, mais je ne me sens pas de me plonger dans ces arcanes compte tenu de la quantité de travail qui me reste à faire et du peu de temps dont je dispose.

Ce point n'est qu'un des multiples points que je dois traiter dans le redesign de ce site, le principal étant de développer un outillage qui permette à l'auteur de générer simplement ses pages sans avoir à se plonger dans les arcanes des langages web (HTML, CSS, JS et PHP). Jusqu'à présent c'est un collage assez peu cohérent où abondent les <table> imbriquées, parfois sans aucune raison apparente, et les

<br><br><span clas="...">...</span><br><br>

, le tout dans des cellules de <table>.... Rendre cela responsive est infaisable en pratique, la complexité de ces structures bourgeonnantes et surtout leur caractère aléatoire rend le traitement du DOM par programme hautement difficile. Chaque fois que je crois avoir trouvé un moyen d'analyser ces structures pour les remettre d'équerre, je trouve de nouvelles situation qui mettent mon programme en échec.

J'ai donc décidé d'une part de "maquiller" les anciennes pages avant de les reprendre individuellement à la main (il y en a environ 800) et d'autre part de préparer un outillage aussi simple et utilisable que possible pour générer des pages de "bonne qualité".

Je fais cet outillage sous forme de snippets qui génèrent du code HTML et/ou des appels de scripts JS. Il dispose d'un "vocabulaire" de classes CSS qui lui permettent de dire ce qu'il veut comme présentation, par exemple class="center framed blue" va produire un objet centré dans la page, encadré et dont le contenu est en bleu. J'espère que cela va permettre à l'auteur de produire ses documents de nature scientifique et artistique -- domaines où il est hautement compétent -- sans avoir à se coltiner les problèmes techniques.

En ce qui concerne les figures centrées, l'appel au script est

<script>diapo('nom-de-l-image', 'center', 'commentaire')</script>

et c'est le script qui fait tout ce qu'il faut pour générer le HTML qui va bien en appelant les bonnes classes CSS,

Pour l'instant le code généré est

<div class="centerText">
  <figure class="diapo center width60">
    <img src="photo/nom-de-l-image.jpg" alt="">
    <figcaption>commentaire</figcaption>
  </figure>
</div>

où la classe width60 correspond à max-width:60%; et centerText à text-align:center; dans la feuille CSS.
J'espérais pouvoir définir en CSS .diapo.center pour ne pas avoir besoin de la <div>, mais je laisse tomber, du moins pour le moment.
Modifié par PapyJP (25 Jul 2016 - 10:00)