html - 如何减小表单的宽度 (CSS/HTML)

Question

我有这个 html 页面：

<div class="panel panel-default">
    <div class="panel-heading">
        <h1>Usuarios</h1>
    </div>
    <div class="panel-body">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Telefone</th>
                    <th>Email</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let usuario of usuarios | async">
                    <td>{{usuario.nome}}</td>
                    <td>{{usuario.telefone}}</td>
                    <td>{{usuario.email}}</td>
                    <td><button (click)="deleteUsuario(usuario.id)" class="btn btn-danger">Delete</button>
                    <button (click)="updateUsuario(usuario.id)" class="btn btn-info" style="margin-left: 10px">Update</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

宽度跟随导航栏，因此它被拉伸到整个屏幕：

我怎样才能将它缩小到屏幕的中心，就像在表单之前和之后有一个边距一样？

我希望它是这样的：

标签： htmlcss

Answer 1

只需添加此样式代码：

form {
   max-width: 900px;
   margin-left: auto;
   margin-right: auto
}