How to move "THANK YOU" to center

Question

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.

[Please do not upload images of code/errors when asking a question.](https://meta.stackoverflow.com/q/285551) — chazsolo, May 10 '21 at 18:00
Please provide us with a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Please close/finish your `HTML` snippet and possibly provide us with any related `CSS` and `JS` so we can help you. — Matthew Dangle, May 10 '21 at 18:46
Does this answer your question? [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element) — Antoni, May 15 '21 at 16:12

score 1 · Answer 1 · 2021-05-10T18:21:34.593

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>

Do not answer questions that don't have the proper research, time or clarity put into them. — Anonymous, May 10 '21 at 18:06
@Anonymous ah, I see now. I was assuming because at the time I answered there was no code snippet. Thx for bring it to my attention and Weasley thx for posting your code — , May 10 '21 at 18:10

How to move "THANK YOU" to center

1 Answers1