Centering modal title and glyph

HTML & CSS
1

Thank you for help.
this is my experiment regarding centering modal title and glyphicon and setting size’
I can see iy is not the right way, title words are upon each other and other things might be that I don’t see., please help me, thank you.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    
  <style>  
	.centergl { padding: 20px 50%;
    			font-size:6em;
    }
    .centerttl { display: block;
				 margin-left: 50%;
				 margin-right: 50%; 
    			 font-size:3em;
    			 
    }
  </style>
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <p>Use w3-container classes to create different sections in the modal (e.g. header & footer).</p>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <header class="w3-container w3-teal"> 
        <span onclick="document.getElementById('id01').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <span class="glyphicon glyphicon-user centergl"></span>
        <h2 class="centerttl">Modal Header</h2>
      </header>
      <div class="w3-container">
        <p>Some text..</p>
        <p>Some text..</p>
      </div>
      <footer class="w3-container w3-teal">
        <p>Modal Footer</p>
      </footer>
    </div>
  </div>
</div>
            
</body>
</html>
2

You could also try center align the text/glyph in block containers, like:


.centergl {
  display: block;
  padding: 20px 0;
  text-align: center;
  font-size: 6em;
}
.centerttl {
  margin: .5em 0;
  text-align: center;
  font-size: 3em;
}
3

thank you for help it is lovely. I have a bs3 modal and I try to sort out it’s code this way.
I would like to ask, how can I make bigger the closing tag on the top right corner and change color? thank you.
thank you.

1 Like
4

Set a font-size for the element.

If you only want to change the colour of the “X”, then again, simply add the color rule to the styles.

5

thank you, can I make a bit bigger?

6

Please read my previous reply.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.