居中對齊的項目，然後隱藏他們幾個，但仍然居中對齊

Question

我有中心對齊3 svg的。用戶從後端選擇其中哪些被顯示，其餘的被隱藏。我想保持這些圖像中心對齊。現在，如果隱藏了一個或多個圖像，則會爲該區域留出空白區域。我使用的透明度隱藏物品 代碼：

<div class="parent"> 
    <div class="work--service_provided"> 
    1 
    </div> 
    <div class="work--service_provided" style="display:none;"> 
    2 
    </div> 
    <div class="work--service_provided"> 
    3 
    </div> 
</div> 
.work--service_provided{ 
    text-align: center; 
    display: inline-block; 
    margin: auto; 
} 

Fiddle。這樣做的

Answer 1

雙向：

1. 以下內容添加到你的CSS

   .parent { 文本對齊：中心; }

https://jsfiddle.net/dalinhuang/eret23y8/4/

附加ALIGN = 「中心」 到父

<div class="parent" align="center">

https://jsfiddle.net/dalinhuang/eret23y8/3/