cari

Rumah  >  Soal Jawab  >  teks badan

Saya tidak boleh menjajarkan apa-apa ke tengah pada skrin

Saya mengikuti tutorial YouTube tentang cara membuat bar navigasi responsif pada HTML menggunakan CSS dan semuanya berjalan lancar sehingga saya cuba menambah teks di tengah skrin dan ia muncul di sebelah kiri skrin (hanya jika resolusi tetingkap lebih tinggi daripada 952px jam lebar). Saya sangat baru dengan CSS dan semua yang saya cuba perbaiki nampaknya tidak berkesan. Kodnya adalah seperti berikut

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-family: montserrat;
}

nav {
  background: #0082e6;
  height: 80px;
  width: 100%;
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 100px;
  font-weight: bold;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}

a.active,
a:hover {
  background: #1b9bff;
  transition: .5s;
}

.checkbtn {
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

@media (max-width: 952px) {
  label.logo {
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a {
    font-size: 16px;
  }
}

@media (max-width: 858px) {
  .checkbtn {
    display: block;
  }
  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li {
    display: block;
  }
  nav ul li a {
    font-size: 20px;
  }
  a:hover,
  a.active {
    background: none;
    color: #0082e6;
  }
  #check:checked~ul {
    left: 0;
  }
}

section {
  background: url(bg1.jpeg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
  opacity: 20%;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<meta charset="utf-8">
<meta name="viewport" content="width=device-widht,initial-sclae=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/.js" crossorigin="anonymous"></script>
<nav>
  <input type="checkbox" id="check">
  <label for="check" class="checkbtn">
                <i class="fas fa-bars"></i>
            </label>
  <label class="logo">Air</label>
  <ul>
    <li><a href='home.html'>Home</a></li>
    <li><a href='About.html'>About</a></li>
    <li><a href='Flights.html'>Flights</a></li>
    <li><a href='Contact.html'>Contact</a></li>
  </ul>
</nav>
<section>
  <h1 style="text-align:center;">test</h1>
</section>

P粉136356287P粉136356287233 hari yang lalu400

membalas semua(2)saya akan balas

  • P粉966979765

    P粉9669797652024-04-02 10:24:29

    Ini menyelesaikan masalah: tetapkan lebar kepada hanya lebar teks, kemudian selaraskan bekas ke tengah melalui margin 0 auto .

    test

    balas
    0
  • P粉216203545

    P粉2162035452024-04-02 09:19:08

    Menambah section { 边框:1px 实心透明; } juga menyelesaikan masalah ini.

    Lihat coretan kod di bawah.

    * {
      padding: 0;
      margin: 0;
      text-decoration: none;
      list-style: none;
      box-sizing: border-box;
    }
    
    body {
      font-family: montserrat;
    }
    
    nav {
      background: #0082e6;
      height: 80px;
      width: 100%;
    }
    
    label.logo {
      color: white;
      font-size: 35px;
      line-height: 80px;
      padding: 100px;
      font-weight: bold;
    }
    
    nav ul {
      float: right;
      margin-right: 20px;
    }
    
    nav ul li {
      display: inline-block;
      line-height: 80px;
      margin: 0 5px;
    }
    
    nav ul li a {
      color: white;
      font-size: 17px;
      padding: 7px 13px;
      border-radius: 3px;
      text-transform: uppercase;
    }
    
    a.active,
    a:hover {
      background: #1b9bff;
      transition: .5s;
    }
    
    .checkbtn {
      font-size: 30px;
      color: white;
      float: right;
      line-height: 80px;
      margin-right: 40px;
      cursor: pointer;
      display: none;
    }
    
    #check {
      display: none;
    }
    
    @media (max-width: 952px) {
      label.logo {
        font-size: 30px;
        padding-left: 50px;
      }
      nav ul li a {
        font-size: 16px;
      }
    }
    
    @media (max-width: 858px) {
      .checkbtn {
        display: block;
      }
      ul {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #2c3e50;
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all .5s;
      }
      nav ul li {
        display: block;
      }
      nav ul li a {
        font-size: 20px;
      }
      a:hover,
      a.active {
        background: none;
        color: #0082e6;
      }
      #check:checked~ul {
        left: 0;
      }
    }
    
    section {
      background: url(bg1.jpeg) no-repeat;
      background-size: cover;
      height: calc(100vh - 80px);
      opacity: 20%;
      border: 1px solid transparent;
    }
    
    
    
    
      
      
      
        Air
      
      
      
      sssccc
    
    
    
      
      

    test

    balas
    0
  • Batalbalas