なぜテキスト整列ですか？私のDIV内のすべての要素を中心にしていませんか？

Question

DIV内に2つのブロック要素があり、別のDIVと表があります。 https://jsfiddle.net/0nrcfkr5/1/ - 私は

#container-content { 
    text-align: center; 
} 

を試してみましたので、私はここで私が

<div id="container-content" style="background-color:orange;"> 
    <h3>My Subscriptions</h3> 

    <table id="subscriptions-table"> 
     <thead> 
      <tr> 
       <th>Subscription</th> 
       <th>Download</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="even subscription-row header"> 
        <td class="ig-header-title ellipsis"> 
        <img src="/assets/s-icon-0d60471f901d65172728d3df0e793b2ee4493a529c1a1dca73409fdae56ad362.png" alt="S icon"> 
        <a class="name ellipsis" href="/scenarios/18">My Scenario #1</a> 
       </td> 
       <td align="center"><a href="/scenarios/18/download"><img src="/assets/zip_icon-c2a0694959db12a0939d264d4283478c1f59a4b118df839d7020aca929a1df61.png" alt="Zip icon"></a></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

を使用しているHTMLだとここでの問題を示してフィドルのコンテナDIV内でそれらの両方を中央にしたいと思います。より大きなDIV（CSSを使用して）の中にテーブルをどのように配置するのですか？

Answer 1

text-alignは、インライン要素でのみ動作します。あなたはautoに左右のマージンを設定することで、あなたのdivを中心にすることができます

#subscriptions-table { 
    margin: 0 auto; 
} 

https://jsfiddle.net/0nrcfkr5/2/

Answer 2

#container-content table { 
    display: inline-block; 
} 

これは、親コンテナとセンターテーブルのテキスト整列を継承します。