recherche

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

Le titre réécrit est : Méthode de mise en œuvre du centrage des div et du positionnement des éléments

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粉803444331P粉803444331484 Il y a quelques jours509

répondre à tous(2)je répondrai

  • P粉208469050

    P粉2084690502023-09-10 09:04:18

    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>

    répondre
    0
  • P粉555696738

    P粉5556967382023-09-10 00:25:46

    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>

    répondre
    0
  • Annulerrépondre