简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Centrer un div sur une image de fond d'une hauteur de 100vh
P粉006847750
P粉006847750 2024-02-17 12:39:44
0
1
324

Je travaille sur un cours où j'ai une barre de navigation à position fixe en haut. L'arrière-plan est défini sur une hauteur de 100vh et le div avec le contenu du texte est au centre de l'arrière-plan. En utilisant Flexbox, il est presque centré, mais pour le placer réellement au centre de l'arrière-plan, la hauteur du div doit être réglée à 100 % de la hauteur. Je connais quelque chose sur Flexbox et la hauteur de la fenêtre, mais je ne comprends pas pourquoi je dois définir la hauteur du div à 100 % pour vraiment centrer la plongée. Je pense que vous pouvez mettre n'importe quelle image comme arrière-plan ici pour reproduire ce que je demande. J'espère que j'ai du sens ici. 

* {
  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
                        

                    

                

                

                    

                    

                        

                            
                        

                    

                

            

            

                

                    
répondre à tous(1)

                    
                    
                

                


                                

                    P粉953231781
                    

                        

                            

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

                            
Si je comprends bien, vous dites que le contenu est centré horizontalement par défaut, mais le div nécessite height: 100% de centrer le contenu verticalement. 


Div est un élément bloc, ce qui signifie par défaut : 


    

  1. Ils occupent toute la largeur de l'écran
    2. 

  2. Ils n'occupent que la hauteur nécessaire à l'affichage du contenu (leur hauteur par défaut est auto). 
    3. 



Si votre div est une Flexbox centrée sur le contenu, même si le contenu est centré verticalement, la div ne s'étendra que vers le bas si nécessaire pour y adapter l'élément le plus haut. Puisque le div est toujours en haut de l'écran, même si son contenu est centré verticalement à l'intérieur du div, le contenu apparaîtra en haut de l'écran, car le div est aussi grand que le contenu et parce que le div est aussi grand que le contenu. en haut de l'écran. 


Cependant, le height: auto 默认属性可以被覆盖。如果将高度设置为 100% du div forcera le div à faire 100% de la hauteur de son élément parent (page). Le div donnera alors au contenu beaucoup d'espace supplémentaire, et grâce aux règles Flex, il positionnera le contenu au centre vertical de cet espace supplémentaire. 


Pour mieux comprendre cela, vous pouvez essayer d'ajouter border: 5px dashed black 添加到 div 中，以便您可以看到其大小和位置，然后使用不同的高度值，例如 unset、100%、50% etc. Essayez-le et essayez-le ! 

                            

                                 
                                Comme +0
                                

                                    Ajouter une réponse
                                    
                                

                            

                                                            
                            
                            

                                
    
                                    
                                


                            



                        

                    


                

                

                



                

            

        


        
        

            
            

                

                    
Sujets populaires

                    Plus>
                    
                

                


                    
                

 
            

            


                

                    
 Articles populaires 

                

                

                    
                

            

            

                

                    
Tutoriels populaires

                    Plus>
                    
                

                

                    

                        
Tutoriels associés 

                        
Recommandations populaires

                        
Derniers cours

                    

                    
                    
                    
                

                
            

            

                

                    
Derniers téléchargements

                    Plus>
                    
                


                                

                

                    

                        
effets Web 

                        
Code source du site Web

                        
Matériel du site Web

                        
Modèle frontal

                    

                    

                    

                    

                    

                

                
            


        

    





    

        

            

                

                    

                        À propos de nous
                        Clause de non-responsabilité
                        Sitemap
                        

                    

                    
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！