简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Le titre réécrit est : Méthode de mise en œuvre du centrage des div et du positionnement des éléments
P粉803444331
P粉803444331 2023-09-09 10:29:04
0
2
475

J'essaie de recréer quelque chose comme ça mais maintenant je rencontre des problèmes. Le premier problème que j'ai eu était de centrer ma div 'principale', j'ai fait ceci : 

body{
  background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.main {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Mais à cause de « position : corrigée », mon arrière-plan ne s'affiche plus et j'ai ajouté l'arrière-plan dans le corps.

Un autre problème que j'ai est que sur le site Web que je veux recréer, il y a deux éléments p l'un à côté de l'autre, mais je n'arrive pas à rassembler mes deux éléments p en utilisant ce code : 

p{
  margin: 0;
  display:inline;
  float:left;
}

Voici à quoi ressemblent mon élément p et l'ensemble du code HTML : 

<!DOCTYPE html>
<html>
  <head>
    <title>练习网站</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/c934cb6477.js" crossorigin="anonymous"></script>
  </head>
    <body>

      <main class="container">

        <!-- <header>
          <div class="header">
          </div>
        </header> -->

        <div class="main">
          <h1>嘿，我是测试</h1>
          <h2>学生软件开发者。</h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>


        <footer class="bg-dark text-center text-white footer fixed-bottom">
          <div class="container p-4 pb-0">
            <section class="mb-4">
              <!-- Linkedin -->
              <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"
                ><i class="fab fa-linkedin-in"></i
              ></a>
        
              <!-- Github -->
              <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"
                ><i class="fab fa-github"></i
              ></a>

             <!-- CV -->
             <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"
             ><i class="fa-regular fa-address-card"></i
           ></a>
         </section>
          </div>
        
          <!-- 版权 -->
          <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
            © 
            <span id="current-year"></span>
            版权所有：
            <a class="text-white">测试</a>
          </div>
        </footer>

      </main>

      <script src="/Files/Js/function.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
    </body>
</html>

P粉803444331
P粉803444331

répondre à tous(2)
P粉208469050
P粉2084690502023-09-10 09:04:18 2 plancher

Au lieu de positionner absolument votre contenu principal, vous pouvez appliquer display: flex à l'élément body et le régler sur 100vh pour qu'il couvre la fenêtre d'affichage. Ensuite, l'arrière-plan réapparaîtra.

Pour vos éléments p, de la même manière, enveloppez-les dans un div avec display : pliez-les et placez-les côte à côte comme dans l'exemple ci-dessous. 

body {
  background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
  background-size: cover;
  height: 100vh;
  display: flex;
  /*display flex allows you the center the main element in the middle of your page */
  align-items: center;
  justify-content: center;
}

.main {
  /* not needed */
}

.inline-container {
  display: flex;
  gap: 1rem;
}

.inline {
  display: block;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c934cb6477.js" crossorigin="anonymous"></script>

<main class="container">

  <!-- <header>
          <div class="header">
          </div>
        </header> -->

  <div class="main">
    <h1>嘿，我是测试</h1>
    <h2>学生软件开发人员。</h2>
    <div class="inline-container">
      <p class="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim
        ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      <p class="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim
        ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
  </div>


  <footer class="bg-dark text-center text-white footer fixed-bottom">
    <div class="container p-4 pb-0">
      <section class="mb-4">
        <!-- Linkedin -->
        <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"><i
              class="fab fa-linkedin-in"></i></a>

        <!-- Github -->
        <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"><i
              class="fab fa-github"></i></a>

        <!-- CV -->
        <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"><i
              class="fa-regular fa-address-card"></i></a>
      </section>
    </div>

    <!-- 版权 -->
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
      ©
      <span id="current-year"></span> 版权所有：
      <a class="text-white">测试</a>
    </div>
  </footer>

</main>

<script src="/Files/Js/function.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Comme +0
Ajouter une réponse
P粉555696738
P粉5556967382023-09-10 00:25:46 1 plancher

Je comprends votre façon de penser, mais malheureusement, elle n'est pas tout à fait correcte. Vous voyez, le design de la page initiale est complètement différent du début :

Le créateur n'a pas centré le div principal, mais a ajouté un rembourrage au corps de 64px，然后将wrapper div的宽度设为100%，高度设为100% - 64px * 2. Alors, pour ce faire : 

body{
  padding:64px;
}
.wrapper{
  height:calc(100vh - 64px * 2);
  width:100%;
  border: 1px solid black;
}
<div class="wrapper"></div>
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！