Click here to Skip to main content
15,391,859 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
.close-button button {
  border: 1px solid black;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  outline: none;

.close-button {
  margin-right: 50%;
  margin-top: 7%;
  /*  I wrote to center the button */

<link rel="stylesheet" href="" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<button type="button" data-toggle="modal" data-target="#exampleModal" class="btn btn-success">Click</button>

<div class="modal" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content" style="height:100px;">
      <div class="close-button">
        <button type="button" class="close" data-dismiss="modal"</button>


What I have tried:

Text-align:center or line-height:50% not working. How can fix it ? Thank you.
Updated 17-Jul-18 5:41am

1 solution

OK. Looking at the example, I'm assuming you want to see the X icon in the center of the button. You can try wrap the icon in an element and then mess with the display and margin.

Here is an example

Tryit Editor v3.5[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900