I have a problem where even if i use the text-align property and equals it to center, the text in my modal box, which is the upload successful inside the paragraph tag, is not changing anything. It is still at the leftside of the modal box. I want it to be in the center. Kindly help me on this one.

Here is the aspx code:

```
<div id="myModal" class="modal">
                   <!-- Modal content -->
                   <div class="modal-content">
                      <span class="close">&times;</span><br />
                      <p>Upload Successful</p>
                   </div>
              </div>

```

Here is the css:

```
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

.modal-content p{
    text-align: center;
}

```

Here is also an image of the modal box:

[![enter image description here](https://i.stack.imgur.com/MnM0v.png)](https://i.stack.imgur.com/MnM0v.png)