CSS Alignment

Navigation
0

I have the following panel:

I'mtryingtoalignthegraphswithindivfromthealinha-chartclassbuttonoavail.WhenIputaleft:33%andright:33%itiscentralized,butasexpected,itisonthemobile.Couldyouhelpme?

FollowmyHTMLcode**edited:

<divclass="portlet-body row">
    <div class="col-lg-12">
        <h3 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['
    </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>
    
asked by anonymous 12.01.2017 / 19:17

2 answers

2

In your case I would make a table with 1 <tr> and 3 <td> and put it inside the div main below the div of the name: 

<div class="portlet-body row">
    <div class="col-lg-12">
        <h2 class="nome-rv"><i class="fa fa-user"></i> <?=$_SESSION['nomeCompleto']?></h2>
    </div>
</div>

And I would put within each%% of the percentage ball with the description below.

    
12.01.2017 / 19:36
0

Try to use the class text-center of the bootstrap itself to center the graphs, since they are within span : 

class="col-lg-4 col-sm-12 text-center" -> alinha-chart é realmente necessário aqui?

If you do not align and set a maximum width or width for the divs which contains the graphics and align them with CSS: 

margin-left: auto
margin-right: auto
    
12.01.2017 / 19:31
How to set the db variable in ClientModel? Failed to insert data into the bank by RadioGroup