'How to move "THANK YOU" to center

How to move "THANK YOU" to center

and this is part of my code

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel" style= "font-family: 'Nanum Myeongjo', serif;">THANK YOU</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body textalert" style="font-family: 'Kanit', sans-serif;">
            ระบบได้ทำการจองสินค้าของท่านเรียบร้อย 
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>

How can I move "THANK YOU" to center? I have already tried centering it with align, but it doesn't seem to work.

htmlcss


Solution 1:[1]

EDIT: I created a container div element that contains the modal. Now you can use text-align: center; so that you can center the 'THANK YOU' text. Also, I added fit-contents so that the container can be easily moved about and resized as needed without effecting it's content or the other way around.

<body>
    <div class="modal-container" style="width: fit-content; height: fit-content;">
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel" style= "font-family: 'Nanum Myeongjo', serif;text-align: center;">THANK YOU</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body textalert" style="font-family: 'Kanit', sans-serif;">????????????????????????????????????? </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions