cari

Rumah  >  Soal Jawab  >  teks badan

Pusatkan div pada imej latar belakang dengan ketinggian 100vh

Saya sedang menjalankan kursus di mana saya mempunyai bar navigasi kedudukan tetap di bahagian atas. Latar belakang ditetapkan pada ketinggian 100vh dan div dengan kandungan teks berada di tengah latar belakang. Menggunakan Flexbox ia hampir berpusat, tetapi untuk benar-benar membawanya ke tengah latar belakang, ketinggian div perlu ditetapkan kepada 100% ketinggian. Saya tahu sesuatu tentang Flexbox dan ketinggian viewport, tetapi saya keliru mengapa saya perlu menetapkan ketinggian div kepada 100% untuk benar-benar memusatkan selam. Saya rasa anda boleh meletakkan sebarang imej sebagai latar belakang di sini untuk meniru perkara yang saya minta. Harap saya masuk akal di sini. 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: #fff;
  color: #333;
  line-height: 1.5;
}

ul {
  list-style: none;
}

a {
  color: #333;
  text-decoration: none;
}

h1,
h2 {
  font-weight: 300px;
  line-height: 1.5:
}

p {
  margin: 10px 0;
}

img {
  width: 100%;
  /*makes image width of the container */
}


/* navbar */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #333;
  color: #fff;
  width: 100%;
  height: 70px;
  /* apparently a common height for navbar */
  position: fixed;
  top: 0px;
  padding: 0 30px;
}

.navbar a {
  color: #fff;
  padding: 10px 20px;
  margin: 0 5px;
}

.navbar a:hover {
  border-bottom: 1px solid #28a745;
}

.navbar ul {
  display: flex;
}


/* Header */

.hero {
  background: url("/img/home/showcase.jpg") no-repeat center center/cover;
  height: 100vh;
  position: relative;
  color: #fff;
}

.hero .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome to EdgeLedger</title>
  <link rel="stylesheet" href="/css/utilities.css">
  <!-- style.css is last in case utilities.css needs to be overwritten -->
  <link rel="stylesheet" href="/css/style.css">
  <script src="https://kit.fontawesome.com/6eab1538de.js" crossorigin="anonymous"></script>
</head>

<body id="home">
  <header class="hero">
    <div id="navbar" class="navbar">
      <h1 class="logo">
        <span class="text-primary"><i class="fas fa-book-open"></i>Edge</span>Ledger
      </h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#cases">Cases</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>

    <div class="content">
      <h1>The sky is the limit</h1>
      <p>We provide world class financial assistance</p>
      <a href="#about" class="btn">Read More</a>
    </div>
  </header>
</body>

</html>

P粉006847750P粉006847750276 hari yang lalu370 
membalas semua(1)saya akan balas
  • P粉953231781
    P粉9532317812024-02-18 00:39:29
    Jika saya faham dengan betul, anda mengatakan bahawa kandungan dipusatkan secara mendatar secara lalai, tetapi div memerlukan height: 100% untuk memusatkan kandungan secara menegak. 
    

    Div ialah elemen blok, yang bermaksud secara lalai: 
    

      

    1. Mereka mengambil keseluruhan lebar skrin
      2. 

    2. Mereka hanya mengambil ketinggian yang diperlukan untuk memaparkan kandungan (ketinggian lalai mereka ialah auto). 
      3. 

    

    Jika div anda adalah Flexbox berpusatkan kandungan, walaupun kandungannya berpusat secara menegak, div itu masih akan mengembang ke bawah mengikut keperluan untuk memuatkan elemen tertinggi di dalamnya. Memandangkan div masih berada di bahagian atas skrin, walaupun kandungannya dipusatkan secara menegak dalam div, kandungan akan muncul di bahagian atas skrin, kerana div hanya setinggi kandungan, dan kerana div adalah di bahagian atas skrin. 
    

    Walau bagaimanapun, height: auto 默认属性可以被覆盖。如果将高度设置为 100% div akan memaksa div menjadi 100% daripada ketinggian elemen induknya (halaman). Div kemudiannya akan memberikan kandungan sekumpulan ruang tambahan, dan terima kasih kepada peraturan Flex, ia akan meletakkan kandungan di tengah menegak ruang tambahan itu. 
    

    Untuk memahami perkara ini dengan lebih lanjut, anda boleh cuba menambah border: 5px dashed black 添加到 div 中，以便您可以看到其大小和位置，然后使用不同的高度值，例如 unset、100%、50% dsb. Cuba dan cuba! 
    balas
    0
  • Batalbalas