recherche

Maison  >  Questions et réponses  >  le corps du texte

Centrer un div sur une image de fond d'une hauteur de 100vh

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粉006847750P粉006847750276 Il y a quelques jours369 
répondre à tous(1)je répondrai
  • P粉953231781
    P粉9532317812024-02-18 00:39:29
    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 ! 
    répondre
    0
  • Annulerrépondre