Center icon in modal window Header

Navigation
2

I have the following structure of HTML code: 

<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>

Which generates the following header:

I want to center the icon marked with the arrow, I appreciate any help you can give me.

    
asked by jose luis garcia 09.05.2016 в 18:14
source

3 answers

2

Put the button before the title: 

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

I leave you a Snippet so you can execute it right here: 

<!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>
    
answered by 09.05.2016 / 19:13
source
1

The answer given by Alan NO solves the problem, it is not possible (at least in this case) to vertically center the button just by changing it. You can check it in your demo, by looking at the Chrome inspector and adding borders to the button and its container.

A simple option based on the Bootstrap code 3.3.6 to center it in horizontal , would be to apply style to the class panelTitleTxt to eliminate the float:right; applied by bootstrap to class% % co: link

In that case you can add to your css file: 

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

To center it in a vertical , assuming again that you use Bootstrap 3.3.6, you can apply the following style: 

.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;
}
    
answered by 09.05.2016 в 19:24
0

Using CSS, you can access the close class within the modal-header , as follows: 

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

This will make your button look like this:

In JSBIN I leave you the code: link (take the example that Alan posted earlier and modified it).

    
answered by 09.05.2016 в 19:31
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'projectController' Convert String to decimals android studio