2

Tengo la siguiente estructura de código HTML:

<div class="modal-header-success">

  <h3 class="modal-title" style="text-align: center;">
    Modal PopUp
    <button type="button" class="close panelTitleTxt glyphicon glyphicon-remove" data-dismiss="modal" aria-hidden="true"></button>
  </h3>
</div>

El cual me genera el siguiente header: introducir la descripción de la imagen aquí

Quisiere centrar el Icono señalado con la flecha, agradezco cualquier ayuda que puedan brindarme.

1
  • 1
    Deberias inspeccionar con el developer tools del browser que estilo tiene aplicado el boton del header y extender el style de bootstrap para cambiar como se alinea verticalmente. Eso si, nunca cambies el .css de bootstrap directamente, tiene que extender el estilo no modificar los archivos de la libreria Commented el 9 may. 2016 a las 17:13

3 respuestas 3

3

Pon el botón antes del título:

<button type="button" class="close panelTitleTxt glyphicon glyphicon-remove" data-dismiss="modal"></button>
<h4 class="modal-title">Modal Header</h4>

Te dejo un Snippet para que lo ejecutes aquí mismo:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Ejemplo</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Abrir Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close panelTitleTxt glyphicon glyphicon-remove" data-dismiss="modal"></button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Algún texto de prueba.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

1
  • No entiendo el downvote, deberían aclarar el porque.
    – Alan
    Commented el 10 may. 2016 a las 11:28
0

Utilizando CSS, podes acceder a la clase close dentro del modal-header, de la siguiente manera:

.modal-header .close {
     margin: 0 auto;
     text-align: center;
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
}

Esto hará que tu botón quede de la siguiente manera:

introducir la descripción de la imagen aquí

En JSBIN te dejo el código: http://jsbin.com/namuxu/edit?html,output (tome el ejemplo que colocó Alan anteriormente y lo modifiqué).

1
  • En ningún lugar menciona "vertical", en ese caso, falta información en la pregunta. Commented el 9 may. 2016 a las 17:34
0

La respuesta dada por Alan NO soluciona el problema, no es posible (al menos en este caso) centrar verticalmente el botón solo cambiándolo de posición. Pueden comprobarlo en su demo, mirando el inspector de Chrome y agregando bordes al botón y a su contenedor.


Una opción sencilla basada en el código de Bootstrap 3.3.6 para centrarlo de forma horizontal, sería aplicar estilo a la clase panelTitleTxt para eliminar el float:right; aplicado por bootstrap a la clase close: https://github.com/twbs/bootstrap/blob/master/less/close.less

En ese caso puedes agregar a tu archivo de css:

.modal-header-success .panelTitleTxt {
  float: none;
}

Para centrarlo de forma vertical, asumiendo de nuevo que usas Bootstrap 3.3.6, puedes aplicar el siguiente estilo:

.modal-header-success .panelTitleTxt {
  /* Usar el mismo valor de line-height del contenedor, en este caso el h3 */
  line-height: 1.42857173;
  margin-top: inherit;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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