Center-Container UND negative Marge verwenden

Question

Ich style Zahlen.

Ich will es machen, so dass, wenn das Bild kleiner als die Textspalte ist, die Zahl seiner Größe und Zentren schrumpft, für das ich verwende:

div { 
 
    width: 20em; 
 
    margin: 0 auto; 
 
    background-color: #f8f8f8; 
 
} 
 
figure { 
 
    display: table; 
 
    margin: 1rem auto; 
 
    padding: 2rem 2rem; 
 
    background-color: #eee; 
 
} 
 
figure img { 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
}

<div><figure> 
 
    <img src="https://placehold.it/100x100" alt="100x100 placeholder"> 
 
</figure> 
 
<figure> 
 
    <img src="https://placehold.it/400x100" alt="400x100 placeholder"> 
 
</figure></div>

Das Problem ist, dass die Figur außerhalb der Spalte bluten soll, wenn das Bild die Größe der Spalte hat. Dafür würde ich normalerweise verwenden:

div { 
 
    width: 20em; 
 
    margin: 0 auto; 
 
    background-color: #f8f8f8; 
 
} 
 
figure { 
 
    display: table; 
 
    margin: 1rem -2rem; 
 
    padding: 2rem 2rem; 
 
    background-color: #eee; 
 
} 
 
figure img { 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
}

<div><figure> 
 
    <img src="https://placehold.it/100x100" alt="100x100 placeholder"> 
 
</figure> 
 
<figure> 
 
    <img src="https://placehold.it/400x100" alt="400x100 placeholder"> 
 
</figure></div>

aber diese Lösung entfernt die margin: auto;

Zentrierung würde ich nur CSS-Lösungen zu schätzen wissen, aber js und jquery tun werden, wenn gibt es keine andere Weg

Answer 1

Setzen Sie die figure als inline-table und wenden Sie text-align:center auf die Eltern.

body { 
 
    background: lightgreen; 
 
} 
 
div { 
 
    width: 20em; 
 
    margin: 0 auto; 
 
    background-color: #f8f8f8; 
 
    background: cornflowerblue; 
 
    text-align: center; 
 
} 
 
figure { 
 
    display: inline-table; 
 
    margin: 1rem -2rem; 
 
    padding: 2rem 2rem; 
 
    background-color: #eee; 
 
} 
 
figure img { 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
}

<div> 
 
    <figure> 
 
    <img src="https://placehold.it/100x100" alt="100x100 placeholder"> 
 
    </figure> 
 

 
    <figure> 
 
    <img src="https://placehold.it/400x100" alt="400x100 placeholder"> 
 
    </figure> 
 
</div>