Center a div on page

Question

I have this div i want to center on my page as shown in the code bellow, the problem is that i am trying to add "class="center"" to each div but i cant center the whole box, anyone know why it wont 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>

[Best way to center a
on a page vertically and horizontally](https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) does this anwer your question ? — RenaudC5, Jul 02 '21 at 09:18

DreamTeK · Answer 1 · 2021-07-02T09:25:18.707

Your code is already centered, which means the classes you have added but not included in your question are overriding your changes.

I strongly recommend that you use classes for styling and remove all inline styling (style="")as this have higher specificity causing overwrites.

<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>

MY RECOMMENDED METHOD

.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>

score 0 · Answer 2 · answered Jul 02 '21 at 09:19

0

You can try flexbox. Something like the following code.

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

answered Jul 02 '21 at 09:19

Ibrahim Hasnat

935
1
8
16

score -1 · Answer 3 · answered Jul 02 '21 at 09:25

-1

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

Or(You need to have a css document) HTML

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

CSS

.center{
  text-align: center;
}

answered Jul 02 '21 at 09:25

Firefight Ro

1
2

Center a div on page

3 Answers3