Question

我这里有一个页面，似乎是唯一一个提供此问题的页面，正文内容是网站中显示的三个选项，例如：每日，3天和每周，由于某些原因不能正确居中，香港专业教育学院尝试添加中心标签无济于事。我查看了代码，我看不到错误，也许第二双眼睛会发现我的问题？

非常感谢任何帮助。

页面链接：~Ship~

<div class="container marg10">
        <div class="row">

                </ul>
            </div>
<center>
        <div class="col-lg-3 col-sm-3 col3-box">
            <div class="plan featured">
              <div class="plan-head"><h3>Daily</h3><br>
              <div class="price">$15 <span>Per Day</span></div></div>
                <ul>
                  <li><b>No Automatic Bans</b></li>
                  <li class="two_plan"><b>KV's last weeks</b></li>
                  <li><b>XOSC Spoofing</b></li>
                  <li class="two_plan"><b>Custom Login Notification</b></li><br>
<p><input id="accept1" type="checkbox"> I have read and agree to the <a href="javascript:showToS();clicked = true;">Terms &amp; Conditions</a></p>
                  <li><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" onsubmit="return confSubmit('accept1');">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="snip">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></li>
                </ul>
            </div>
        </div>
    <div class="col-lg-3 col-sm-3 col3-box">
            <div class="plan featured">
              <div class="plan-head"><h3>3 Days</h3><br>
              <div class="price">$40 <span>3 Days</span></div></div>
                <ul>
                  <li><b>No Automatic Bans</b></li>
                  <li class="two_plan"><b>KV's last weeks</b></li>
                  <li><b>XOSC Spoofing</b></li>
                  <li class="two_plan"><b>Custom Login Notification</b></li><br>

<p><input id="accept2" type="checkbox"> I have read and agree to the <a href="javascript:showToS();clicked = true;">Terms &amp; Conditions</a></p>
                  <li><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" onsubmit="return confSubmit('accept2');">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="snip">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></li>
                </ul>
            </div>
        </div>
            <div class="col-lg-3 col-sm-3 col3-box">
            <div class="plan featured">
              <div class="plan-head"><h3>Weekly</h3><br>
              <div class="price">$70 <span>Per Week</span></div></div>
                <ul>
                  <li><b>No Automatic Bans</b></li>
                  <li class="two_plan"><b>KV's last weeks</b></li>
                  <li><b>XOSC Spoofing</b></li>
                  <li class="two_plan"><b>Custom Login Notification</b></li><br>

<p><input id="accept3" type="checkbox"> I have read and agree to the <a href="javascript:showToS();clicked = true;">Terms &amp; Conditions</a></p>

                  <li><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" onsubmit="return confSubmit('accept3');">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="snip">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form></li>
                </ul>
            </div>
        </div>
</center>
  <div class="content">
  <div class="container">

  <div class="border"></div>

         <div class="col-md-12">
          <div class="copy">
            <h6>The <span class="color">Mod Shop</span></h6>
            <p>Copyright &copy; The Mod Shop - </a><a href="index.html">Home</a> | <a href="aboutus.html">About Us</a>| <a href="contactus.html">Contact Us</a></p>
          </div>
      </div>
    </div>
  <div class="clearfix"></div>
  </div>
</footer> 

<!-- JS -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script> 
<script src="js/jquery.isotope.js"></script> <!-- Isotope for gallery -->
<script src="js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto for images -->
<script src="js/jquery.cslider.js"></script> <!-- Parallax slider -->
<script src="js/modernizr.custom.28468.js"></script>
<script src="js/filter.js"></script> <!-- Filter for support page -->
<script src="js/cycle.js"></script> <!-- Cycle slider -->
<script src="js/jquery.flexslider-min.js"></script> <!-- Flex slider -->

<script src="js/easing.js"></script> <!-- Easing -->
<script src="js/custom.js"></script>

Answer 1

行的列宽必须加起来为12.将计划列表宽度更改为4（3 * 4 = 12），页脚应从新行开始：

<div class="row">
    <center>
    <div class="col-lg-4 col-sm-4 col4-box">
        <!-- plan 1 content -->
    </div>
    <div class="col-lg-4 col-sm-4 col4-box">
        <!-- plan 2 content -->
    </div>
    <div class="col-lg-4 col-sm-4 col4-box">
        <!-- plan 3 content -->        
    </div>
    </center>
</div>

<div class="row">
    <center>
    <div class="col-md-12">
    <! footer content -->
    </div>
    </center>
</div>

HTML - 身体不居中？

1 个答案: