对齐CSS内容

我有以下小组：

我想要的是将圆图集中在我的表的

td

中，并在它转向移动时保持它的集中。我在尝试这样做时遇到了一些问题。我的代码是这样的：

<div class="portlet-body row">
    <div class="col-lg-12">
        <h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['nomeCompleto']?></h3>
    </div>
    <div class="col-lg-4 col-sm-12">
        <table class="table table-bordered tabela-meta">
            <tbody>
                <tr>
                    <td class="grafico-situacao">
                        <div class="c100 p100 orange big">
                            <span>100%</span>
                            <div class="slice">
                                <div class="bar"></div>
                                <div class="fill"></div>
                            </div>
                        </div>
                    </td>                     
                </tr>
                <tr>
                    <td>PISO</td>
                </tr>
                <tr>
                    <td>3.500</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-lg-4 col-sm-12">
        <table class="table table-bordered tabela-meta">
            <tbody>
                <tr>
                    <td class="grafico-situacao">
                        <div class="c100 p82 big">
                            <span>82%</span>
                            <div class="slice">
                                <div class="bar"></div>
                                <div class="fill"></div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>META</td>
                </tr>
                <tr>
                    <td>3.500</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-lg-4 col-sm-12">
        <table class="table table-bordered tabela-meta">                        
            <tbody>
                <tr>
                    <td class="grafico-situacao">
                        <div class="c100 p63 green big">
                            <span>63%</span>
                            <div class="slice">
                                <div class="bar"></div>
                                <div class="fill"></div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>SUPERMETA</td>
                </tr>
                <tr>
                    <td>3.500</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

100%
皮索
3.500
82%
元
3.500
63%
超人
3.500

有一些类，但我现在还没有使用它们

链接到代码笔：

---

有什么建议吗？谢谢

如果您可以利用flexbox（请参阅浏览器兼容性），那么很容易做到这一点

如果您使用的是引导版本4，则只需使用以下内容包装内容：

<div class="d-flex justify-content-around">...</div>

---

将您的CSS更新到此位置

.c100 {
    position: relative;
    font-size: 120px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    /* float: left; */
    margin: 0 auto 0.1em auto; /* margin: 0 0.1em 0.1em 0; */
    background-color: #cccccc;
}

---

那是引导程序吗？您应该设置一个JSFIDLE或codepen或其他可以说明这个问题的东西。您似乎忘记了包含适用于圆图的CSS。还有，你说“当它转向移动设备时，让它集中起来”——你是说它可以在桌面浏览器中工作吗？@AndrewMorton你说我忘记的css是什么意思？是的！这是一个响应迅速的布局，我说因为我唯一能“集中”它的方法是使用左：33%和右：33%，但当它转向移动时，不再集中。制作一个工作小提琴，我们将帮助您实现所需的结果。@jvbarsou我们无法用提供的代码复制屏幕截图中的内容。您还没有提供一些CSS来实现这一点。问题应包含最小、完整且可验证的示例。

.c100 {
    position: relative;
    font-size: 120px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    /* float: left; */
    margin: 0 auto 0.1em auto; /* margin: 0 0.1em 0.1em 0; */
    background-color: #cccccc;
}