Search code examples
htmlalignmenthtml-table

Align table to the center, and put components in 1 line

I would like to know how can I align correctly this table, as you can see here:

enter image description here

The table is to much to the right(im thinking that my title "Generar Pedido de Materia Prima" is affecting that), i have tried using align="center" but it doesn't work. As you can see im using bootstrap. Another problem that I'm having is that I can´t have this following tags: enter image description here in just one line, like this:

enter image description here

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="estilo1.css">

<title>Home</title>
</head>
<body>

<header>
<img src="Images/logo.png" width="200" heigth="20" alt="Muxa Logo">
<p>Generar Pedido de Materia Prima</p>
</header> 

<div class="container-fluid">
<div class="row" id="fila1">

    <div class="col-xs-6 col-md-6" >

        <div class="row">

            <div class="col-xs-6 col-md-6">
            <strong>Código Pedido: </strong>
            <input type="text" class="form-control" placeholder="Pedido">
            </div>
            <div class="col-xs-6 col-md-6">
            <strong>Fecha: </strong>
            <input type="date" class="form-control" placeholder="Fecha">
            </div>

        </div>

    </div>

    <div class="col-xs-6 col-md-6">

        <div class="row">

            <div class="col-xs-6 col-md-6">
            <strong>Estado: </strong>
            <select class="form-control">
            <option>Pendiente</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            </select>
            </div>
            <div class="col-xs-6 col-md-6">
            <button type="button" class="btn btn-default btn-primary">
            <span class="glyphicon glyphicon-search"></span> Buscar Materia Prima
            </button>
            </div>

        </div>

    </div>


</div>
</div>

<div class="container">
<table class="table" id="tabla">

    <thead>
        <tr>
            <th>Código</th>
            <th>Nombre</th>
            <th>Unidad de Medida</th>
            <th>Cantidad</th>
        </tr>
    </thead>

        <tr>
            <td>1248</td>
            <td>Tela Algodon</td>
            <td>M2</td>
            <td>500</td>

        </tr>

        <tr>
            <td>5369</td>
            <td>Botones Negros</td>
            <td>UND</td>
            <td>100</td>

        </tr>

    <tfoot>
        <tr>
            <td>
                <button type="button" class="btn btn-default btn-success">
                <span class="glyphicon glyphicon-plus"></span> Generar
                </button>
            </td>
            <td>
                <button type="button" class="btn btn-default btn-warning">
                <span class="glyphicon glyphicon-remove"></span> Cancelar
                </button>
            </td>
            <td>
                <button type="button" class="btn btn-default btn-warning">
                <span class="glyphicon glyphicon-trash"></span> Quitar
                </button>
            </td>
            <td>
                <button type="button" class="btn btn-default btn-danger">
                <span class="glyphicon glyphicon-download-alt"></span> Salir
                </button>
            </td>
        </tr>
    </tfoot>
</table>
</div>


<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>

Here is my CSS:

body{
background: #fcf2e5;
}

.container{

margin-right: 20px;
margin-top:30px;

}

header {
  font-size: 250%;
  background: #beb8a4;
  width: 100vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
header img {
  width: 200px;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
p{
  position: relative;
  width: calc(100% - 200px);
  float: right;
  text-align: center;
}

#fila1{
  margin-top: 40px;
}

#tabla{
  padding-bottom: 30px;
  padding-top: 30px;
}

#tabla td,th{
  text-align:center; 
  vertical-align:middle;
}

#fila2{
  margin-top: 40px;
}

.form-control{
width: 100px;
}
Solution

  • table is to much to the right

    because there is a "margin-right" applied on .container div, So remove that margin. And for your second problem, Use "form-inline" class as a parent of that section. Check this Fiddle.

    [https://jsfiddle.net/Zedhmem/7tuky6es/]