为什么 text-align:center 没有将我的 DIV 中的所有元素居中？答案

【问题标题】：Why is text-align:center not centering all the elements within my DIV?为什么 text-align:center 没有将我的 DIV 中的所有元素居中？
【发布时间】：2017-04-29 01:39:23
【问题描述】：

我在一个 DIV 中有两个块元素，另一个 DIV 和一个表格。我想将它们都放在容器 DIV 中，所以我尝试了

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

这是我正在使用的 HTML

<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>

这是说明问题的 Fiddle ——https://jsfiddle.net/0nrcfkr5/1/。如何在较大的 DIV 中居中表格（使用 CSS）？

【问题讨论】：

标签： html css center text-alignment

【解决方案1】：

text-align 只会对内联元素进行操作。您可以通过将左右边距设置为 auto 来使 div 居中：

#subscriptions-table {
  margin: 0 auto;
}

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

【讨论】：

【解决方案2】：

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

这将继承父容器的文本对齐并居中表格。

【讨论】：