CSS alignment

Asked

Viewed 285 times

0

I have the following panel: inserir a descrição da imagem aqui

I’m trying to line up the charts inside the div from the class alinha-chart but without success. When I put one left: 33% and right: 33% it gets centered, but as expected, zoa on mobile. Could help me?

Follow my HTML code **edited:

<div class="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>
css

  • col-sm-12 -> this guy indicates that on smaller screens to div will take the whole line, I believe it is. (https://getbootstrap.com/examples/grid/) Take a look at this link and see if it helps.

  • yes @rLinhares, but would like to align the C100 div with the table, inside the bootstrap grid

  • tries to put both the c100 as to table within a <div class="row"> This will force line breaking (not due to screen size) and can avoid this buged alignment.

  • @Inhares without success

2 answers

2

In your case I would make a table with 1 <tr>and 3 <td> and put inside the div main under 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 put it inside each <td>the percentage ball with the description below.

  • I tried it your way but could not align. I made some modifications on your suggestion

0

Try to use the class text-center own bootstrap to center the graphics, once they inside the span:

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

If not aligned and set a maximum width or width for divs that contains the graphics and makes them align with the CSS:

margin-left: auto
margin-right: auto

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.