我正在制作一个页面来注册用户并且我正在加密输入的密码,用户显示在页面的一部分中,并且所有注册的人都列在表格中,但是我对所说的可见性有疑问表,因为自从我开始加密密码以来,加密密码;它大约有 60 位左右,它会导致表格移动并粘在页面的右边缘,在左侧留下很多空间。我想要的是使桌子居中,这样就没有这样的空间,而且看起来更好。
我的 HTML 模板中的代码如下:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<style>
body{
background:#0F3E45;
font-family:'Lato', sans-serif;
font-size: 16px;
font-weight: 600;
}
h1{
color:white;
}
h3{
color:white;
}
p{
color:white;
}
th{
color:white;
}
td{
color:white;
}
nav ul{
position:relative;
margin:auto;
width:50%;
text-align: center;
}
nav ul li{
display:inline-block;
width:24%;
line-height: 50px;
list-style: none;
}
nav ul li a{
color:white;
text-decoration: none;
}
nav ul li a:hover{
color:green;
text-decoration: none;
}
section{
position: relative;
margin: auto;
width:400px;
}
.form-group{
padding: 0;
}
.navbar-dark .navbar-brand:hover{
color:lightblue;
text-decoration: none;
}
section form input#usuarioRegistro{
text-transform: lowercase;
}
section h2{
color:white;
position: relative;
margin:auto;
text-align: center;
}
table{
position:relative;
margin:auto;
width:100%;
left:-15%;
}
table thead tr th{
padding:10px;
}
table tbody tr td{
padding:10px;
}
</style>
</head>
<body>
<?php include "modules/navegacion.php"; ?>
<section>
<?php
$mvc = new MvcController();
$mvc -> enlacesPaginasController();
?>
</section>
<script src="views/js/validarRegistro.js"></script>
<script src="views/js/validarIngreso.js"></script>
<script src="views/js/validarEdicion.js"></script>
</body>
</html>
在我看来,显示用户的地方有以下内容:
<div class="row">
<div class="col">
<div class="row my-5 d-flex justify-content-start">
<div class="col-12 ">
<h2>USUARIOS</h2>
</div>
</div>
<div class="container">
<div class=row>
<div class="col" >
<table class="table table-bordered table-striped table-sm">
<thead>
<tr>
<th class="text-center">Usuario</th>
<th class="text-center">Contraseña</th>
<th class="text-center">Email</th>
<th class="text-center">Editar</th>
<th class="text-center">Borrar</th>
</tr>
</thead>
<tbody>
<?php
$b=new MvcController();
$b->vistaUsuariosController();
$b->borrarUsuarioController();
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
应该注意的是,我正在从数据库中填充表......
我留下一张桌子是什么样子的图片,这样你就可以理解发生在我身上的事情。
附言 我已经尝试过放置:
table{
margin: auto;
}
但这对我不起作用,桌子仍然处于相同的位置。如果有人知道我可以进行哪些更改以使其正常工作,那将非常有帮助。
我对您发布的代码进行了测试,但它并没有像那样显示。它显示居中但偏左一点,我通过从 css 中删除它来修复它:
表格正在移动到页面右侧,因为您正在为包含表格的部分分配固定宽度:
除此之外,我建议您在不需要时不要在其他列中包含多个列。
在我看来,bootstrap 有一个预定义的类,它在下面与 flexbox 一起使用,以使用如下属性水平居中内容
justify-content
:您可以将其应用于
div
包裹整个表格的检查这个链接
看来您的问题出在这些样式线中。