Trying to center a paragraph in a div-CodePudding

I'm very new to bootstrap so there are a few things I do not under stand. For some reason, inside my div, my paragraph isn't centering. Am I doing it wrong?

I tried what you're supposed to do. (It's at the very bottom)

  <div class= container-fluid p-0>
                <!-- Adding the First Child Header Bar -->
                            <nav >
            <div >
            
                <img src="logo/head.png" class= "logoimg">
                <div  id="navbarSupportedContent">
                <ul >
                    <li >
                    <a  aria-current="page" href="#">Home</a>
                    </li>
                    <li >
                    <a  href="#">Link</a>
                    </li>
                    <li >
                    <a  href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul >
                        <li><a  href="#">Action</a></li>
                        <li><a  href="#">Another action</a></li>
                        <li><hr ></li>
                        <li><a  href="#">Something else here</a></li>
                    </ul>
                    </li>
                    <li >
                    <a >Disabled</a>
                    </li>
                </ul>
                <form  role="search">
                    <input  type="search" placeholder="Search" aria-label="Search">
                    <button  type="submit">Search</button><br><br>
                </form>
                </div>
               
            </div>
            </nav>
   <!-- Closing the First Child Header Bar -->
            
                
            <!-- Starting second bar-->
            <div >
                <h1 >my website</h1>
                <p1 >my website!</p1>
            </div>
            <!-- Ending second bar-->

CodePudding user response：

You can use the text-align property with a value of center in your CSS.

div {
  text-align: center;
}

CodePudding user response：

If you are using bootstrap, then I recommend following the rules of bootstrap to put it inside a container . This will bring everything into the centre, and you can apply your custom style if needed.

<div >
  <h1 >my website</h1>
  <p1 >my website!</p1>
</div>

or If you change to

it will apply your .text-center class on it without any change.