0

Estoy creando una tabla que quiero que vaya en el centro de la pagina a la hora de mostrar la informacion,pero por alguna razon no se centra, esta asi:

introducir la descripción de la imagen aquí

en la esquina de la pagina y no se mueve,

aqui les muestro el codigo html:

<div id="see_actual_products">
       <section class = "see_actual_products_section">
            <div id="products">
                <h1 v-if="showProducts == true">{{message}}</h1>
            </div>
            <table id="table_container_actual_products">
                <tr>
                    <th v-bind:colspan = "length" >Actual products in making.</th>
                </tr>  
                <tr>
                    <td>
                        <table id ="table_actual_products" v-for="i in listCurrentproducts">
                            <caption> {{i.room}}</caption>
                            <tr> 
                                <td>
                                    Name:
                                    {{i.name}}
                                </td>
                            </tr>
                            <tr>    
                                <td>
                                    LOT:
                                    {{i.lot}}
                                </td>
                            </tr>    
                            <tr>    
                                <td>
                                    Quantity to be package:
                                    {{i.quantity_to_package}}
                                </td>
                            </tr>
                            <tr>    
                                <td>
                                    Quantity of pallets: 
                                    {{i.pallets}}
                                </td>
                            </tr>
                            <tr> 
                                <td>
                                    Progress:
                                    {{i.progress}}
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    {{i.finished_pallets}} pallets of {{i.pallets}} pallets
                                    <button @click="addPallet(i.room)">Add Pallet</button>
                                </td>
                            </tr>
                            <tr v-if="i.pallets == i.finished_pallets">
                                <td>
                                    <h3>Completed</h3>
                                    <button @click="finish(i.room)">Finish procedure</button>
                                </td>
                            </tr>
                        </table>
                    </td>    
                </tr> 
            </table>
        </section>
    </div>

el id see_actual_products lo uso solamente para Vuejs, el contenedor que estoy usando para centrar completamente es el section "see_actual_products_section", pero como dije anteriormente no me lo centra, aqui el codigo css:

* {
margin: 0;
padding: 0;
box-sizing: border-box;}

.see_actual_products_section{
margin: auto;
padding: 20px;
border-radius: 4px;}

he buscado y dicen de usar text-aling:center pero solo centra los textos dentro de section, float, igual, gracias :)

1 respuesta 1

3

Utiliza flexbox en un div padre y luego centralo de forma vertical u horizontal, por ejemplo aqui te muestro como centro un cuadro rojo sobre un cuadro negro.

.padre {
  height: 100px;
  width: 100px;
  background: black;
  /* Codigo para centrar*/
  display: flex;
  justify-content: center;
  align-items: center;
  /* Fin del codigo para centrar*/
}

.hijo {
  height: 10px;
  width: 10px;
  background: red;
}
<div class="padre">
  <div class="hijo">
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.