2016-04-19 7 views
-2

div要素をセンタリングするには?CSSスタイルは、私が中心このページの価格表を取得しようとしている

現在のところ、左側に正当な理由がありますが、私はそれを中心にしたいと思います。

ここでは、コードです:

<section id="pricing" class="pricing"> 
<div class="container"> 
    <div class="row m-b-lg"> 
     <div class="col-lg-12 text-center"> 
      <div class="navy-line"></div> 
      <h1><span class="navy"><strong>Get 50% Off Through This Sponsored Link!</strong></span></h1> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-lg-4 wow zoomIn"> 
      <ul class="pricing-plan list-unstyled"> 
       <li class="pricing-title"> 
        Monthly 
       </li> 
       <li class="pricing-desc"> 
        21-day FREE Trial 
       </li> 
       <li class="pricing-price"> 
        <s>$40</s> <span>$20</span> 
       </li> 
       <li> 
        Unlimited Sequences 
       </li> 
       <li> 
        Unlimited Active Contacts 
       </li> 
       <li> 
        Un-Sponsored Emails 
       </li> 
       <li> 
        Email & Chat Support 
       </li> 
       <li> 
        Import Contacts 
       </li> 
       <li> 
        API & Zapier Access 
       </li> 
      </ul> 
     </div> 

     <div class="col-lg-4 wow zoomIn"> 
      <ul class="pricing-plan list-unstyled selected"> 
       <li class="pricing-title"> 
        Annual 
       </li> 
       <li class="pricing-desc"> 
        21-day FREE Trial 
       </li> 
       <li class="pricing-price"> 
        <s>$400</s> <span>$200</span> 
       </li> 
       <li> 
        Unlimited Sequences 
       </li> 
       <li> 
        Unlimited Active Contacts 
       </li> 
       <li> 
        Un-Sponsored Emails 
       </li> 
       <li> 
        Email & Chat Support 
       </li> 
       <li> 
        Import Contacts 
       </li> 
       <li> 
        API & Zapier Access 
       </li> 
       <li> 
        <strong>2 Months FREE!</strong> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="row m-t-lg"> 
     <div class="col-lg-8 col-lg-offset-2 text-center m-t-lg"> 
      <a class="btn btn-primary btn-xs" href="http://app.closedeals.co/users/sign_up/fbs">Start Your 21-Day FREE Trial</a> 
     </div> 
    </div> 
</div> 


</div> 

</section> 

私が追加しようとした:

<div class="container" align="center"> 
+0

コードを投稿して試したことはありますか? –

+0

ありがとうございます。私はそれを更新しました。 – Dustin

答えて

0

の親にこのコードを置くフレキシボックスでそれを行うことができますページにはブートストラップがあるので、オフセットクラスを使用することができます。インスペクタで2のオフセットを試してみました。素敵です。

<div class="col-lg-4 col-lg-offset-2 wow zoomIn animated" style="visibility: visible; animation-name: zoomIn;"> 

ご希望の場合は、別の値を試すことができます。

COL-LG-オフセット-2

ここでは詳細されています。あなたは相殺する bootstrap grid offseting

0

をあなたは2つのボックス

YOUR CONTAINER{ 
    display: flex; 
    justify-content: center; 
} 
0

たいですか最初の価格表?

最初の項目にオフセットを追加できます。

<div class="col-lg-4 col-lg-offset-2 wow zoomIn animated">

関連する問題