将 div 在页面上居中

Question

我有这个 div，我想在我的页面上居中，如下面的代码所示，问题是我试图向每个 div 添加“class =“center””，但我无法将整个框居中，任何人都知道为什么它不会居中？

<div style="text-align: center;" class="pricing-table">
    <?php foreach ($days AS $k => $day): ?>
        <div class="col-md-5ths col-xs-6">
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="text-center"><strong><?php echo UCWords(t('BUY', 'BUY')); ?></strong><br/><?php echo UCWords(t('SUBDOMAIN', 'SUBDOMAIN')); ?></h3>
                </div>
                <div class="panel-body text-center">
                    <p class="lead total-price" style="font-size:40px"><strong><?php echo SITE_CONFIG_COST_CURRENCY_SYMBOL; ?><?php echo number_format(str_replace(",", "", constant('SITE_CONFIG_COST_FOR_' . $day . '_DAYS_PREMIUM')), 2); ?></strong></p>
                    <p class="lead price-per-day" style="font-size:16px">
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item"><i class="fa fa-lock"></i> <?php echo UCWords(t('secure_payment', 'secure payment')); ?></li>
                    <li class="list-group-item"><i class="fa fa-eye-slash"></i> <?php echo UCWords(t('safe_and_anonymous', '100% Safe & Anonymous')); ?></li>
                </ul>
                <div class="panel-footer">
                
                    <?php
                    pluginHelper::outputPaymentLinks($day);
                    ?>
            
                </div>
            </div>
        </div>
    <?php endforeach; ?>
    <div class="clear"></div>
</div>

Answer 1

你可以尝试flexbox。就像下面的代码一样。

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 2

您的代码已经居中，这意味着您已添加但未包含在问题中的类将覆盖您的更改。

我强烈建议您使用类进行样式设置并删除所有内联样式（

style=""

），因为这具有更高的特异性，导致覆盖。

<div style="text-align: center;" class="pricing-table">
  <div class="col-md-5ths col-xs-6">
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="text-center"><strong>BUY</strong><br/>SUBDOMAIN</h3>
      </div>
      <div class="panel-body text-center">
        <p class="lead total-price" style="font-size:40px"><strong>SAMPLE</strong></p>
        <p class="lead price-per-day" style="font-size:16px">
      </div>
      <ul class="list-group list-group-flush text-center">
        <li class="list-group-item"><i class="fa fa-lock"></i></li>
        <li class="list-group-item"><i class="fa fa-eye-slash"></i> </li>
      </ul>
      <div class="panel-footer">
        FOOTER
      </div>
    </div>
  </div>
</div>

我推荐的方法

.pricing-table {
  background: #eee;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-center {
  text-align: center;
}

.total-price {
  font-size: 40px;
}

.price-per-day {
  font-size: 16px;
}

<div class="pricing-table">
  <div class="col-md-5ths col-xs-6">
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="text-center"><strong>BUY</strong><br/>SUBDOMAIN</h3>
      </div>
      <div class="panel-body text-center">
        <p class="lead total-price"><strong>SAMPLE</strong></p>
        <p class="lead price-per-day">
      </div>
      <ul class="list-group list-group-flush text-center">
        <li class="list-group-item"><i class="fa fa-lock"></i></li>
        <li class="list-group-item"><i class="fa fa-eye-slash"></i></li>
      </ul>
      <div class="panel-footer">
        FOOTER
      </div>
    </div>
  </div>
</div>

Answer 3

<div style="text-align: center;"></div>

或者(你需要有一个css文档) HTML

<link rel="stylesheet" type="text/css" href="Style.css">
<div class="center">

CSS

.center{
  text-align: center;
}