Question

问题背景：

我正在使用Bootstrap为网络应用创建页面。

问题：

我在布局中有两个Sections。我希望divs中的信息Sections水平和垂直居中。

目前我无法让div成为中心。

我尝试将以下内容应用于两个部分中的div，但布局没有区别。

.centerSectionDivs{
   float: none;
   margin: 0 auto;
}

这是我布局的代码笔：

http://codepen.io/daveharris/pen/rxvLby

这显示了问题。任何有助于将该部分中的信息完美地集中在一起的帮助将非常感激。

Answer 1

你可以使用flex：

#section1 {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

http://codepen.io/gc-nomade/full/xZzRav/

Answer 2

你的html中没有一个被称为.centerSectionDivs的类。

所以没有什么会改变，因为它不存在。

所以这个：

<!DOCTYPE html>
<html ng-app="myCrud">
<head>
    <title>CRUD AngularJS</title>
    <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<script type="text/javascript" src="angular/angular.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css">
<style>
    .jumbotron {

        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .table {
        margin-top: 20px;
    }
    .form-control {
        margin-bottom: 5px;
    }
</style>
<script type="text/javascript">
    angular.module("myCrud", []);
    angular.module("myCrud").controller("myCrudCtrl", function ($scope, $http) {
        $scope.tit = "CRUD AngularJS e PHP";

        $scope.adicionarUsuario = function (usuario) {
            $http.post("salvar.php", usuario).success(function (data){
                delete $scope.usuario;
                $scope.usuarioForm.$setPristine();
                carregarUsuario();
            });
        };
        var carregarUsuario = function () {
            $http.get("buscar.php").then(function (retorno){
                console.log(retorno.data);
                $scope.usuarios = retorno.data;
            }); 
        };

        $scope.editarUsuario = function (usuario){
            $scope.messagem =  usuario.nome;

          /*  $http.post("editar.php", usuario).success(function (data){
                delete $scope.usuario;
                $scope.usuarioForm.$setPristine();
                carregarUsuario();                
            });   */
            //////////////////////////////////THE QUESTION POINT


        };        
        $scope.apagarUsuario = function (usuario) {               
            $http.delete("apagar.php", {params: {id: usuario}}).success(function (data, status){
                carregarUsuario();
                $scope.messagem(data.msg);
            });
        };
        $scope.ordenarPor = function (campo) {
                $scope.criterioDeOrdenacao = campo;
                $scope.direcaoDaOrdenacao = !$scope.direcaoDaOrdenacao;
            };

        carregarUsuario();

    });
</script>
</head>
<body ng-controller="myCrudCtrl">
    <div class="jumbotron">
        <h4>{{tit}}</h4>
        <h6>{{messagem}}</h6>
        <input class="form-control" type="text" ng-model="criterioDeBusca" placeholder="O que você está buscando?"/>
        <table class="table">
            <tr>
                <td><a href="" ng-click="ordenarPor('nome')"><b>Nome</b></a></td>
                <td><a href="" ng-click="ordenarPor('email')"><b>Email</b></a></td>
                <td><b>Password</b></td>
                <td></td>
                <td></td>
            </tr>
            <tr ng-repeat="usuario in usuarios | filter:criterioDeBusca | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao">
                <td>{{usuario.nome}}</td><!-- <a href="#" editable-text="usuario.name">{{ usuario.name || "empty" }}</a>-->
                <td>{{usuario.email}}</td>
                <td>{{usuario.pass}}</td>
                <td><button class="btn btn-xs btn-alert" ng-click="editarUsuario(usuario)">Editar</button></td>
                <td><button class="btn btn-xs btn-danger" ng-click="apagarUsuario(usuario.id)">Apagar</button></td>
            </tr>
        </table>

        <hr>

        <form name="usuarioForm">
            <input class="form-control" id="inputnome" type="text" ng-model="usuario.nome" placeholder="Nome">
            <input class="form-control" type="text" ng-model="usuario.email" placeholder="Email">
            <input class="form-control" type="text" ng-model="usuario.pass" placeholder="Senha">
        </form>

        <button class="btn btn-primary" ng-click="adicionarUsuario(usuario)">Adicionar</button>
    </div>

</body>
</html>

不需要。

您可能希望查看其他类或ID，以找出与哪些相关的内容

如何将这个div放在一个区域？

2 个答案: