Question

我有以下小组：

我想要的是将圆形图表集中在我桌子的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>

有些课程，但我现在还没有使用它们。

指向codepen的链接：http://codepen.io/anon/pen/apNrxy

有什么建议吗？谢谢！

Answer 1

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

如果您使用的是Bootstrap版本4，则可以使用以下内容包装内容：

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

有关详细信息，请参阅documentation。

如果您使用的是Bootstrap版本3，您仍然可以直接使用flexbox样式：

display: flex;
justify-content: space-around;

Answer 2

将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;
}

对齐CSS内容

2 个答案: