新手建站求助：预制网站隐藏一个定价项后模块左对齐，如何实现三个定价项居中显示？

看你的代码应该是用了带Bootstrap类的预制模板对吧？删掉一个定价板块后剩下的内容左对齐，是因为原来的布局是4个col-lg-3（每个占3份，4个加起来刚好填满Bootstrap行的12列），现在只剩3个，总宽度变成9份，剩余空间都留在右侧，所以整体就往左偏移了。

给你两个简单的解决办法，选哪个都能搞定：

办法1：调整列宽让3个板块填满整行 #

把每个保留的定价板块的col-lg-3改成col-lg-4——3个col-lg-4加起来刚好是12列，这样三个板块会自动均匀分布在整行里，自然就居中了。

修改后的核心代码片段：

<div class="row gy-4" data-aos="fade-left">
  <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="500">
    <!-- Free Plan 内容 -->
  </div>
  <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="200">
    <!-- Starter Plan 内容 -->
  </div>
  <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="300">
    <!-- Business Plan 内容 -->
  </div>
  <!-- 已删除Ultimate Plan板块 -->
</div>

办法2：用居中类保持原板块宽度 #

要是你想保留每个板块原来的宽度（继续用col-lg-3），那给外层的row加上justify-content-center类就行——这个是Bootstrap自带的类，能让行内的列在水平方向上居中对齐。

修改后的row部分代码：

<div class="row gy-4 justify-content-center" data-aos="fade-left">
  <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="500">
    <!-- Free Plan 内容 -->
  </div>
  <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="200">
    <!-- Starter Plan 内容 -->
  </div>
  <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="300">
    <!-- Business Plan 内容 -->
  </div>
  <!-- 已删除Ultimate Plan板块 -->
</div>

小提醒 #

• 办法1适合让三个板块撑满整行，视觉上更饱满；办法2适合保留原板块大小，两侧留空，风格更宽松。
• 改完保存刷新页面就能看到效果，如果还是有问题，可能是模板里有自定义CSS影响了布局，但一般这两个办法足够解决你的问题啦。

内容的提问来源于stack exchange，提问作者Robin Johnson