中心容器和使用負餘量

Question

我是造型的數字。

我想這樣，當圖像比文字欄小，這個數字縮小到它的大小和中心，使之爲我使用：

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>

問題是，當圖像是列的大小時，我希望圖形在列外出血。對於我通常使用：

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>

，但該解決方案消除了margin: auto;中心

我會很感激CSS唯一的解決辦法，但js和jQuery將做，如果沒有其他way

Answer 1

將figure設置爲inline-table並將text-align:center應用於父級。

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>