居中

css/index.css

@@ -31,19 +31,23 @@
 .banner-cont .banner-text .section-content {
   padding-top: 120px;
   padding-bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
   z-index: 1;
 }
 
-.banner-cont .banner-text h1 {
+/* 文案块：控制具体的左边距，让其与下方 banner-s 第一列内容对齐 */
+.banner-cont .banner-copy {
+  max-width: 560px;
+  margin-left: 60px; /* 与 .banner-s .banner-item 内侧 padding 对齐 */
+  text-align: left;
+}
+
+.banner-cont .banner-copy h1 {
   font-size: 40px;
   line-height: 1.2;
   color: #111827;
 }
 
-.banner-cont .banner-desc {
+.banner-cont .banner-copy .banner-desc {
   font-size: 16px;
   margin-top: 16px;
   margin-bottom: 32px;

index.html

@@ -20,14 +20,16 @@
       <!-- 固定文案区域，使用第一张轮播图的标题/描述/按钮 -->
       <div class="banner-text">
         <div class="section-content">
-          <h1 id="bannerTitle"></h1>
+          <div class="banner-copy">
-          <p class="banner-desc" id="bannerDesc"></p>
+            <h1 id="bannerTitle"></h1>
-          <a
+            <p class="banner-desc" id="bannerDesc"></p>
-            class="btn btn2 btn-normal"
+            <a
-            href="javascript:;"
+              class="btn btn2 btn-normal"
-            id="bannerButton"
+              href="javascript:;"
-            style="display: none;"
+              id="bannerButton"
-          ></a>
+              style="display: none;"
+            ></a>
+          </div>
         </div>
       </div>
     </div>