Align CSS content

Question

I have the following panel:

And what I want is to centralize the circle charts inside the td of my table and keep it centralized when it turns to mobile. I'm having some issues trying to do that. This is how my code is:

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

There are some classes but I'm not using them by now.

Link to codepen: http://codepen.io/anon/pen/apNrxy

Any suggestion? Thanks!

Answer 1

Update your CSS to this

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

Answer 2

It's easy to do if you can leverage flexbox (See browser compatibility here).

If you're using Bootstrap version 4, you can just wrap the content with:

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

See the documentation for more information.

If you're using Bootstrap version 3, you can still use the flexbox styles directly:

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