引入footer.php后HTML文本对齐（居中变左）异常的技术求助

核心问题是你的footer.php包含了完整的HTML文档结构（<html>、<head>、<body>标签），当通过PHP引入到已有页面时，页面会生成多个<html>和<body>标签，这违反了HTML单文档结构规范，导致浏览器渲染时样式规则冲突，原本的居中对齐布局被破坏。

解决步骤 #

1. 重构footer.php，移除完整文档结构
   只保留<footer>相关内容、必要的局部样式和脚本（注意避免重复引入主页面已加载的资源）。

2. 统一公共资源引入
   Bootstrap、Font Awesome等全局资源应该放在主页面的<head>中统一引入，不要在footer或header中重复添加，避免资源冗余和样式冲突。

3. 修正header.php（若存在同样问题）
   如果引入header.php也出现对齐异常，检查它是否也包含完整的<html>/<body>标签，同样需要修改为仅保留头部内容（如导航栏、meta信息）。

修改后的footer.php代码 #

<!-- Footer -->
<footer class="bg-dark text-center text-white mb-4">
  <!-- Grid container -->
  <div class="container p-4">
    <!-- Section: Social media -->
    <section class="mb-4">
      <!-- Facebook -->
      <a title="Facebook" class="btn btn-outline-light btn-floating m-1" href="https://www.facebook.com/SaiNirmanBiocoal" role="button"
        ><i class="fa fa-facebook"></i
      ></a>
      
    </section>
    <!-- Section: Social media -->
    

    <!-- Section: Form -->
    <section class="mb-4">
      <img src="assets/images/SNB-latest.png" style="height:50px;width: auto;" alt="Sai Nirman Biocoal Logo">
    </section>
    <!-- Section: Form -->
    

    <!-- Section: Text -->
    <section class="mb-4">
      <p>
          Sai Nirman Biocoal<br>
          "Fueling the Future with Sustainable Energy"
      </p>
    </section><br>
    <!-- Section: Text -->

    <!-- Section: Links -->
    <section>
      <!--Grid row-->
      <div class="row">
        <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase">Customer Care</h5>

          <ul class="list-unstyled mb-0">
            <li>
              <a href="#!" class="text-white">Contact Us</a>
            </li>
            <li>
              <a href="#!" class="text-white">FAQs</a>
            </li>
            <li>
              <a href="https://sainirmanbiocoal.com/privacy.html" class="text-white">Privacy Policy</a>
            </li>
            <li>
              <a href="#!" class="text-white">Terms of Service</a>
            </li>
          </ul>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase">SNB Website</h5>

          <ul class="list-unstyled mb-0">
            <li>
              <a href="#!" class="text-white">About Us</a>
            </li>
            <li>
              <a href="#!" class="text-white">Products</a>
            </li>
            <li>
              <a href="#!" class="text-white">Careers</a>
            </li>
            <li>
              <a href="#!" class="text-white">Contact</a>
            </li>
          </ul>
        </div>
        <!--Grid column-->

        <!--Grid column-->
        <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
          <h5 class="text-uppercase">My Account</h5>

          <ul class="list-unstyled mb-0">
            <li>
              <a href="#!" class="text-white">Sign Out</a>
            </li>
            <li>
              <a href="#!" class="text-white">Reset Password</a>
            </li>
            <li>
              <a href="#!" class="text-white">Dashboard</a>
            </li>
            <li>
              <a href="#!" class="text-white">Ledger</a>
            </li>
          </ul>
        </div>
        <!--Grid column-->

      </div>
      <!--Grid row-->
    </section>
    <!-- Section: Links -->
  </div>
  <!-- Grid container -->

  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
    <a class="text-white" href="https://www.sainirmanbiocoal.com/">sainirmanbiocoal.com</a>
  </div>
</footer>
<!-- Footer -->

<!-- 注：若主页面已引入jQuery和Bootstrap脚本，可删除以下两行避免重复加载 -->
<script src="assets/vendors/jquery/jquery-3.4.1.js"></script>
<script src="assets/vendors/bootstrap/bootstrap.bundle.js"></script>

<style>
    i {
        width: 15px;
        height: 15px;
    }
</style>

主页面引入示例 #

主页面需保持完整的HTML结构，在<body>底部引入footer：

<!DOCTYPE html>
<html>
<head>
    <!-- 统一引入公共资源 -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="shortcut icon" href="assets/images/leaf.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- 主页面自定义样式 -->
    <style>
        /* 你的居中样式等 */
    </style>
</head>
<body>
    <!-- 主页面内容 -->
    <div class="your-center-content">
        <!-- 原本居中的内容 -->
    </div>

    <!-- 引入footer -->
    <?php include 'footer.php'; ?>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sai Nirman Biocoal