将表格与中心对齐，并将组件放在一行中

时间：2016-11-01 22:12:35

标签： html alignment html-table

我想知道如何正确对齐此表，如下所示：

enter image description here

该表是向右的（我认为我的标题“Generar Pedido de Materia Prima”正在影响那个），我尝试使用align =“center”但它不起作用。正如你所看到我使用bootstrap。 我遇到的另一个问题是我没有以下标签： enter image description here 在一行中，像这样：

enter image description here

这是我的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>

这是我的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;
}

2 个答案:

答案 0 :(得分：0)

  

表格在右边

因为在.container div上应用了“margin-right”，所以删除该边距。 对于您的第二个问题，请使用“form-inline”类作为该部分的父级。 检查这个小提琴。

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

答案 1 :(得分：0)

尝试这个...... 

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;
}
<!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-12 col-md-12" >
        <div class="row">
            <div class="col-xs-3 col-md-3">
	            <strong>Código Pedido: </strong>
	            <input type="text" class="form-control" placeholder="Pedido">
            </div>
            <div class="col-xs-3 col-md-3">
	            <strong>Fecha: </strong>
	            <input type="date" class="form-control" placeholder="Fecha">
            </div>
            <div class="col-xs-3 col-md-3">
	            <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-3 col-md-3">
	            <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" align="right">

    <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>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</body>

相关问题
最新问题