How to get my text in the middle of my div-CodePudding

For some reason, I can't move my text to the middle of my div. I have text-align: center; and justify-content: center; but it still stays at the top of my div, and won't move unless I force it to where I want it to go.

body {
  margin: 0px;
}

.top-nav {
  background-color: gray;
  display: flex;
  justify-content: left;
}

ul {
  list-style: none;
  display: block;
}

li {
  padding: 10px;
  margin-left: -30px;
  color: white;
}

.big-hero {
  background-image: url(../images/books.webp);
  height: 100vh;
  background-repeat: no-repeat;
  margin-top: -22px;
  text-align: center;
  justify-content: center;
  color: white;
}

<body>

  <NAV >
    <UL>
      <LI>Home</LI>
      <LI>About</LI>
      <LI>Gallery</LI>
      <LI>Calendar</LI>
      <LI>Contact</LI>
    </UL>
  </NAV>

  <div >
    <h1>About Us</h1>
  </div>

</body>

CodePudding user response：

you have to use display:flex for the justify-content: center to work

try writing


.big-hero{
    background-image: url(../images/books.webp);
    height: 100vh;
     background-repeat: no-repeat;
    margin-top: -22px;
    text-align: center;
    display:flex;        /* add this*/
    justify-content: center;
    color: white;
}

CodePudding user response：

Change justify-content: left; to center.

.top-nav{
    background-color: gray;
    display: flex;
    justify-content: center;
}

body{
  margin: 0px;
}

.top-nav{
  background-color: gray;
  display: flex;
  justify-content: center;
}

 ul {
  list-style: none;
  display: block;
}

li {
  padding: 10px;
  color: white;
}

.big-hero {
  background-image: url(../images/books.webp);
  height: 100vh;
  background-repeat: no-repeat;
  margin-top: -22px;
  text-align: center;
  justify-content: center;
  color: white;
}

<NAV >
    <UL>
        <LI>Home</LI>
        <LI>About</LI>
        <LI>Gallery</LI>
        <LI>Calendar</LI>
        <LI>Contact</LI>
    </UL>
</NAV>

<div >
    <h1>About Us</h1>
</div>

CodePudding user response：

Add width: 100%; to your ul then simply add text-align: center; to your li's.

body {
  margin: 0px;
}

.top-nav {
  background-color: gray;
  display: flex;
  justify-content: left;
}

ul {
  list-style: none;
  display: block;
  width: 100%;
}

li {
  padding: 10px 0;
  text-align: center;
  color: white;
}

.big-hero {
  background-image: url(../images/books.webp);
  height: 100vh;
  background-repeat: no-repeat;
  margin-top: -22px;
  text-align: center;
  justify-content: center;
  color: white;
}

<nav >
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Gallery</li>
    <li>Calendar</li>
    <li>Contact</li>
  </ul>
</nav>

<div >
  <h1>About Us</h1>
</div>