Der umgeschriebene Titel lautet: Implementierungsmethode zum Zentrieren von Div und Positionieren von Elementen-Fragen und Antworten zum chinesischen PHP-Netzwerk

Ich versuche, so etwas nachzubilden, aber jetzt stoße ich auf einige Probleme. Das erste Problem, das ich hatte, bestand darin, mein „Haupt“-Div zu zentrieren. Ich habe Folgendes getan:

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%);
}

Aber aufgrund von „Position: behoben“ wird mein Hintergrund nicht mehr angezeigt und ich habe Hintergrund im Text hinzugefügt.

Ein weiteres Problem, das ich habe, ist, dass auf der Website, die ich neu erstellen möchte, zwei p-Elemente nebeneinander liegen, ich meine beiden p-Elemente jedoch mit diesem Code nicht zusammenfügen kann:

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

So sieht mein p-Element und das gesamte HTML aus:

<!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>

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; }

Antworte allen(2)

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

而不是绝对定位您的主要内容，您可以将display: flex应用于body元素，并将其设置为100vh，以覆盖视口。然后背景将重新出现。

对于您的p元素，同样，将它们包裹在一个具有display: flex的div中，然后像下面的示例一样将它们并排放置。

Wie +0

Antwort hinzufügen

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

我理解你的思路，但不幸的是，它并不完全正确。你看，初始页面的设计与一开始完全不同：

创建者并没有将主要的div居中，而是给body添加了一个padding为64px，然后将wrapper div的宽度设为100%，高度设为100% - 64px * 2。所以，要做到这一点：

body{
  padding:64px;
}
.wrapper{
  height:calc(100vh - 64px * 2);
  width:100%;
  border: 1px solid black;
}

<div class="wrapper"></div>