2

No sé mucho de diseño (maquetación) y quiero centrar el div (sale en la parte derecha de la imagen).

Dejo el código:

<div class="modal fade" id="modal_form_proceso" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header modal-header-success">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h3 align="center" class="modal-title" id="modal-title-plaza">INGRESE SU NOMBRE COMPLETO</h3>
                </div>
                <div class="form-horizontal">
                    <div class="modal-body">
                        <div class="box-body">
                            <form action="#" id="form_persona">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <input type="hidden" id="numero_unico"> 
                                        <input type="text" id="codigo" name="codigo"
                                               class="form-control text-center" maxlength="10"
                                               placeholder="INGRESE SU NOMBRE COMPLETO" value=""> <span class="help-block"></span>
                                        <p class="notificacion"></p>
                                    </div><br><br>
                                    <div class="modal-footer">
                                        <button class="btn btn-success btn-flat" id="btnGuardar" type="button"><i class="fa fa-print"></i> Guardar</button>
                                        <button class="btn btn-danger btn-flat" type="button" id="cancelar_impresion" data-dismiss="modal"><i class="fa fa-close"></i> Cancelar</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Figura1

1
  • 1
    Solo una pequeña aclaración: diseño y bootstrap no tienen mucho que ver, tal vez no conoces mucho de css y frontend, pero diseño es otro mundo.
    – Shaz
    Commented el 11 may. 2017 a las 14:19

7 respuestas 7

8

En bootstrap 4 el .center-block. a quedado obsoleto, en su lugar puedes usar el .mx-auto.

<div class="mx-auto" style="width: 200px;">
     Centered element
</div>

Mas información: Bootstrap4 Spacing

7

Prueba con la clase de bootstrap "center-block".

Debes tener en cuenta que para que el center-block funcione, el modal de tamaño X debe estar contenido en algo de tamaño X.

Prueba sólo añadiendo a tu div la clase "center-block"
Si no funciona, prueba a ponerle AL PADRE de tu div la clase col-xs-12.

<div class="col-xs-12">
    <div class="center-block">
    </div>
</div>

Otra solución, prueba añadir justo antes de esa caja que tienes desplazada a la derecha, lo siguiente: Un SPAN con la clase CLEARFIX.

Quedando algo así:

<span class="clearfix"></span>
<div class="center-block"></div>

Esta clase lo que hace es "reiniciar" el modo GRID o rejillas de bootstrap.

Por la imagen que has enviado, da la sensación como que en la fila anterior justo al modal, sobran huecos, por como trabaja bootstrap en 12 columnas. Si en esa fila sobra un hueco al final, y este modal por columnas puede entrar, lo hará. Esto se soluciona con la clase "clearfix" en un span.

Poniendo clearfix reinicias la fila a otras 12 nuevas columnas.

Como tercera y última propuesta de solución, puedes "forzar" a que sea como tu gustes, siempre puedes aplicarle un css a esa caja específica.

Por ejemplo, crea la clase en CSS

.centrarCaja {
    position:relative;
    left:40%;
}

Añades la clase a tu caja, la que deseas centrar.

Ya tu modificas el % exacto para centrarlo correctamente.

Si no te hace caso, añadiéndole la clase de CSS, aunque no lo recomiendo para nada, puedes utilizar el !important, quedando algo asi:

.centrarCaja{
    position :relative !important; 
    left: 40% !important;
}

De tal forma que vas a forzar a que se utilice ese estilo o diseño de CSS y colocar la caja como tu gustas.

4

A mí me funcionó esto para centrarlo y aparte usa responsive:

<div class="d-flex justify-content-center">...</div>

Esta solución usa las propiedades Flex de Bootstrap, en concreto las clases para justificar el contenido dentro del contenedor.

1
  • Hola Alan, interesante manera de hacerlo usando flex. Un saludo.
    – Alvaro Montoro
    Commented el 31 ago. 2020 a las 12:24
2

Para centrar cualquier elemento de la pantalla utiliza el estilo margin:auto; en el elemento que quieras. Para ello abre los estilos que estés utilizando en ese modal y buscas el estilo #modal_form_proceso.

#modal_form_proceso{
     margin:auto;
    }
2
  • Es bootstrap .-. Commented el 11 may. 2017 a las 14:03
  • @IvanMoreFlores en mi sector estamos continuamente modificando los estilos de Bootstrap, al fin y al cabo no dejan de ser plantillas. Commented el 12 may. 2017 a las 6:16
0

Creería que aplicandole éstas reglas css puede llegar a funcionar:

#modal_form_proceso
 {
    position: absolute;
    top: 50%;
    left: 50%;
 }

(ésto funciona para centrarlo verticalmente)

Sino, puedes probar poniendo

<center>
   <div class="modal-dialog" role="document">
     [...]
   </div>
</center>

(y ésto horizontal)

0

Puedes utilizar offset

<body class="container">
  <div class="row">
    <div class="col-md-2 col-md-offset-5">
      Esto esta centrado
    </div>
   </div>
  </div>
 </body>

-1

Solucion a esta pregunta:

Solo investigue mas sobre alguans porpiedades de los modal, lo cual quedo de la siguiente manera:

<div class="modal fade" id="modal_form_proceso" role="dialog"
             aria-labelledby="myModalLabel">
            <div class="center-block" class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header modal-header-success">
                        <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h3 align="center" class="modal-title" id="modal-title-plaza">INGRESE SU NOMBRE COMPLETO</h3>
                    </div>
                    <div class="form-horizontal">
                        <div class="modal-body">
                            <div class="box-body">
                                <form action="#" id="form_persona">
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <input type="hidden" id="numero_unico"> 
                                            <input class="form-control text-center"
                                                   id="nombre_completo" name="nombre_completo"
                                                   style="width: 100%"></div><span class="help-block"></span>
                                    </div><br><br>
                                    <div class="modal-footer" align="center">
                                        <button class="btn btn-success btn-lg" id="btnGuardar" type="button"><i class="glyphicon glyphicon-floppy-saved"></i> Guardar</button>
                                        <button class="btn btn-danger btn-lg" type="button" onclick="girar_ruleta()" data-dismiss="modal"><i class="glyphicon glyphicon glyphicon-tower"></i> Jugar</button>
                                    </div>
                            </div>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.