텍스트 정렬 : 왜 내 DIV 내의 모든 요소를 ​​가운데 정렬하지 않습니까?

Question

DIV 내에 다른 두 개의 블록 요소가 있고 다른 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 내에서 모두 중앙 싶습니다. CSS를 사용하여 더 큰 DIV 내에 테이블을 배치하는 방법은 무엇입니까?

Answer 1

text-align은 인라인 요소에서만 작동합니다. 당신은 자동으로 왼쪽과 오른쪽 여백을 설정하여 div의 위치를 ​​지정할 수 있습니다 :

#subscriptions-table { 
    margin: 0 auto; 
} 

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

Answer 2

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

이 부모 컨테이너 및 중앙 테이블의 텍스트 정렬을 상속합니다.