0

queria alinear esta tabla al centro con bootstrap. Utilizo d-block porque si utilizo d-flex me estira la tabla hasta ocupar toda la pagina como se ve mas abajo.

.cuadroLogin
{
    height:550px;
}
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="estilos.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
    </head>
    <body>
        <div class="d-block justify-content-center cuadroLogin" style="overflow-x:auto;">
        <table border="1">
            <th>Id</th><th>Nombre</th>
            <tr><td>1</td><td>Articulo1</td></tr>
        </table>
    </body>
</html>

si uso d-flex me la alinea sin problemas pero la tabla se estira hasta ocupar toda la pantalla.

.cuadroLogin
{
    height:550px;
}
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="estilos.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
    </head>
    <body>
        <div class="d-flex justify-content-center cuadroLogin" style="overflow-x:auto;">
        <table border="1">
            <th>Id</th><th>Nombre</th>
            <tr><td>1</td><td>Articulo1</td></tr>
        </table>
    </body>
</html>

1 respuesta 1

0

Al div prueba agregarle col-auto o tex-center, para alinear al centro verticalmente:

<div class="col-auto"> 

 <table class="table table-striped"></table>

</div>

<div class="tex-center"> 
 <table class="table table-striped"></table>
</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.