简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Pusatkan div pada imej latar belakang dengan ketinggian 100vh
P粉006847750
P粉006847750 2024-02-17 12:39:44
0
1
326

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粉006847750
                    

                        P粉006847750
                        

                    

                

                

                    

                    

                        

                            
                        

                    

                

            

            

                

                    
membalas semua(1)

                    
                    
                

                


                                

                    P粉953231781
                    

                        

                            

                                P粉9532317812024-02-18 00:39:29
                                Tingkat 1
                            

                            
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! 

                            

                                 
                                Suka +0
                                

                                    Tambah Balasan
                                    
                                

                            

                                                            
                            
                            

                                
    
                                    
                                


                            



                        

                    


                

                

                



                

            

        


        
        

            
            

                

                    
Topik popular

                    Lagi>
                    
                

                


                    
                

 
            

            


                

                    
 Artikel popular 

                

                

                    
                

            

            

                

                    
Tutorial Popular

                    Lagi>
                    
                

                

                    

                        
Tutorial berkaitan 

                        
Cadangan popular

                        
Kursus terkini

                    

                    
                    
                    
                

                
            

            

                

                    
Muat turun terkini

                    Lagi>
                    
                


                                

                

                    

                        
kesan web 

                        
Kod sumber laman web

                        
Bahan laman web

                        
Templat hujung hadapan

                    

                    

                    

                    

                    

                

                
            


        

    





    

        

            

                

                    

                        Tentang kita
                        Penafian
                        Sitemap
                        

                    

                    
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！