Twitter Bootstrap Question posted in

How can i center an inner div? – Twitter bootstrap

I am really don’t where is the problem of this.I am trying this with margin:0 auto for center a div.But i have failed again and again.Could anyone one solve my problem? I have searched and found some solution in stackoverflow but those answer do not satisfy my situation.I want two price table in the center of div with float:left each other. By the way i am also using twitter bootstrap.

JSFIDDLE

Thanks in advanced.

.wrapper {
  background-color: #05588B;
}
.pricing_main {
  padding: 10px;
}
.btn1 {
  background: #008ED6;
  background-image: -webkit-linear-gradient(top, #008ED6, #008ED6);
  background-image: -moz-linear-gradient(top, #008ED6, #008ED6);
  background-image: -ms-linear-gradient(top, #008ED6, #008ED6);
  background-image: -o-linear-gradient(top, #008ED6, #008ED6);
  background-image: linear-gradient(to bottom, #008ED6, #008ED6);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 20px 15px 20px 15px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #008ED6;
  margin-right: 2%;
  margin-bottom: 4%;
}
.btn1:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  border: 1px solid #008ED6;
}
.button_area {
  text-align: center;
  margin-top: 2%;
}
.btn2 {
  background: #055689;
  background-image: -webkit-linear-gradient(top, #055689, #055689);
  background-image: -moz-linear-gradient(top, #055689, #055689);
  background-image: -ms-linear-gradient(top, #055689, #055689);
  background-image: -o-linear-gradient(top, #055689, #055689);
  background-image: linear-gradient(to bottom, #055689, #055689);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 20px 30px 20px 30px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ffffff;
}
.btn2:hover {
  background: #008ED6;
  background-image: -webkit-linear-gradient(top, #008ED6, #008ED6);
  background-image: -moz-linear-gradient(top, #008ED6, #008ED6);
  background-image: -ms-linear-gradient(top, #008ED6, #008ED6);
  background-image: -o-linear-gradient(top, #008ED6, #008ED6);
  background-image: linear-gradient(to bottom, #008ED6, #008ED6);
  text-decoration: none;
}
.button_group {
  padding-bottom: 3%;
}
.price_block {
  width: 37%!important;
  border: 1px solid #ddd;
  margin-right: 6%;
  padding-left: 0px!important;
  padding-right: 0px!important;
}
.price_block2 {
  width: 37%!important;
  border: 1px solid #ddd;
  padding-left: 0px!important;
  padding-right: 0px!important;
}
.price_block h3 {
  text-align: center;
  color: #008ED6;
  font-weight: bold;
}
.price_block2 h3 {
  text-align: center;
  color: black;
  font-weight: bold;
}
.price {
  background-color: #008ED6;
  color: white;
}
.price2 {
  background-color: #E5E5E5;
  color: black;
}
.price_block .price {
  text-align: center;
  line-height: 0px;
  padding: 18px;
}
.price_block2 .price2 {
  text-align: center;
  line-height: 0px;
  padding: 18px;
}
.price_block ul {
  margin-top: 7%;
  color: #909090
}
.price_block ul li {
  list-style: none;
  line-height: 30px;
}
.price_block2 ul {
  margin-top: 7%;
  color: #909090
}
.price_block2 ul li {
  list-style: none;
  line-height: 30px;
}
.price_block .btn3 {
  text-align: center;
}
.fa-check {
  background-color: #0DAA7A;
  color: white;
  border-radius: 8px;
  width: 16px;
  height: 16px;
  text-align: center;
}
.fa-close {
  background-color: #e74c3c;
  color: white;
  border-radius: 8px;
  width: 16px;
  height: 16px;
  text-align: center;
}
.btn3 {
  text-align: center;
}
.price_block .btn3 {
  text-align: center;
  background: #008ED6;
  background-image: -webkit-linear-gradient(top, #008ED6, #008ED6);
  background-image: -moz-linear-gradient(top, #008ED6, #008ED6);
  background-image: -ms-linear-gradient(top, #008ED6, #008ED6);
  background-image: -o-linear-gradient(top, #008ED6, #008ED6);
  background-image: linear-gradient(to bottom, #008ED6, #008ED6);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border: 1px solid #008ED6;
  margin-top: 4%;
  margin-bottom: 4%;
  font-weight: bold;
}
.price_block .btn3:hover {
  background: #3da4e3;
  background-image: -webkit-linear-gradient(top, #3da4e3, #3da4e3);
  background-image: -moz-linear-gradient(top, #3da4e3, #3da4e3);
  background-image: -ms-linear-gradient(top, #3da4e3, #3da4e3);
  background-image: -o-linear-gradient(top, #3da4e3, #3da4e3);
  background-image: linear-gradient(to bottom, #3da4e3, #3da4e3);
  text-decoration: none;
}
.price_block2 .btn4 {
  text-align: center;
  background: #909090;
  background-image: -webkit-linear-gradient(top, #909090, #909090);
  background-image: -moz-linear-gradient(top, #909090, #909090);
  background-image: -ms-linear-gradient(top, #909090, #909090);
  background-image: -o-linear-gradient(top, #909090, #909090);
  background-image: linear-gradient(to bottom, #909090, #909090);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border: 1px solid #909090;
  margin-top: 4%;
  margin-bottom: 4%;
  font-weight: bold;
}
.price_block2 .btn4:hover {
  background: #909090;
  background-image: -webkit-linear-gradient(top, #909090, #909090);
  background-image: -moz-linear-gradient(top, #909090, #909090);
  background-image: -ms-linear-gradient(top, #909090, #909090);
  background-image: -o-linear-gradient(top, #909090, #909090);
  background-image: linear-gradient(to bottom, #909090, #909090);
  text-decoration: none;
}
<div class="pricing_main">
  <div class="container">
    <div class="row">
      <div class="price_wrap">
        <div class="col-xs-6 price_block">
          <h3>ANNUAL PLAN</h3>
          <div class="price">
            <p>Save 33% on the Annual Plan</p>
            <h1><strike>$37</strike> <span style="color:#FDBC37;font-weight:bold">$25</span></h1>
            <p>/billed annually</p>
          </div>
          <ul>
            <li><i class="fa fa-check"></i> Find Thousand of Profitable Keywords in Seconds</li>
            <li><i class="fa fa-check"></i> Calculate Keyword Competitiveness</li>
            <li><i class="fa fa-check"></i> Competitor analysis on Top 10 Google Results</li>
            <li><i class="fa fa-check"></i> Check Rankings of sites in Google, Yahoo, and Bing</li>
            <li><i class="fa fa-check"></i> Import Lists of 10,000 Keywords at Once</li>
            <li><i class="fa fa-check"></i> Get Access to the Platinum VIP Facebook Community</li>
            <li style="font-weight:bold"><i class="fa fa-check"></i> FREE Access to Long Tail University ($197 in Value)</li>
            <li style="font-weight:bold"><i class="fa fa-check"></i> Save 33% on Platinum with the Annual Plan</li>
          </ul>
          <center>
            <button type="button" class="btn3">ORDER NOW</button>
          </center>
        </div>
        <div class="col-xs-6 price_block2">
          <h3>MONTHLY PLAN</h3>
          <div class="price2">
            <p>Monthly Payment</p>
            <h1>$37</h1>
            <p>/billed monthly</p>
          </div>
          <ul>
            <li><i class="fa fa-check"></i> Find Thousand of Profitable Keywords in Seconds</li>
            <li><i class="fa fa-check"></i> Calculate Keyword Competitiveness</li>
            <li><i class="fa fa-check"></i> Competitor analysis on Top 10 Google Results</li>
            <li><i class="fa fa-check"></i> Check Rankings of sites in Google, Yahoo, and Bing</li>
            <li><i class="fa fa-check"></i> Import Lists of 10,000 Keywords at Once</li>
            <li><i class="fa fa-check"></i> Get Access to the Platinum VIP Facebook Community</li>
            <li style="font-weight:bold"><i class="fa fa-close"></i> FREE Access to Long Tail University ($197 in Value)</li>
            <li style="font-weight:bold"><i class="fa fa-close"></i> Save 33% on Platinum with the Annual Plan</li>
          </ul>
          <center>
            <button type="button" class="btn4">ORDER NOW</button>
          </center>
        </div>
      </div>
    </div>
  </div>
</div>
Tags:

4

Answers


  1. 0

    Try giving the parent element the tag

    padding: 0 auto;

    Instead of the child’s margin. This should fix the problem in most cases.

    Login or Signup to reply.
  2. 0

    in order to use margin: 0 auto the outer div must have a width, so use:

    .price_wrap{
  width: 100% !important;
}
.price_block{
  margin: 0 auto !important;
}

    enter image description here

    Login or Signup to reply.
  3. 0

    added display:inline-block for .price_block and .price_block2.

    And added text-align:center for .price_wrap

    .wrapper {
  background-color: #05588B;
}
.pricing_main {
  padding: 10px;
}
.btn1 {
  background: #008ED6;
  background-image: -webkit-linear-gradient(top, #008ED6, #008ED6);
  background-image: -moz-linear-gradient(top, #008ED6, #008ED6);
  background-image: -ms-linear-gradient(top, #008ED6, #008ED6);
  background-image: -o-linear-gradient(top, #008ED6, #008ED6);
  background-image: linear-gradient(to bottom, #008ED6, #008ED6);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 20px 15px 20px 15px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #008ED6;
  margin-right: 2%;
  margin-bottom: 4%;
}
.btn1:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  border: 1px solid #008ED6;
}
.button_area {
  text-align: center;
  margin-top: 2%;
}
.btn2 {
  background: #055689;
  background-image: -webkit-linear-gradient(top, #055689, #055689);
  background-image: -moz-linear-gradient(top, #055689, #055689);
  background-image: -ms-linear-gradient(top, #055689, #055689);
  background-image: -o-linear-gradient(top, #055689, #055689);
  background-image: linear-gradient(to bottom, #055689, #055689);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 20px 30px 20px 30px;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ffffff;
}
.btn2:hover {
  background: #008ED6;
  background-image: -webkit-linear-gradient(top, #008ED6, #008ED6);
  background-image: -moz-linear-gradient(top, #008ED6, #008ED6);
  background-image: -ms-linear-gradient(top, #008ED6, #008ED6);
  background-image: -o-linear-gradient(top, #008ED6, #008ED6);
  background-image: linear-gradient(to bottom, #008ED6, #008ED6);
  text-decoration: none;
}
.button_group {
  padding-bottom: 3%;
}
.price_wrap{
  text-align: center;
}
.price_block {
  width: 37%!important;
  border: 1px solid #ddd;
  margin-right: 6%;
  padding-left: 0px!important;
  padding-right: 0px!important;
  display: inline-block;
}
.price_block2 {
  width: 37%!important;
  border: 1px solid #ddd;
  padding-left: 0px!important;
  padding-right: 0px!important;
  display: inline-block;
}
.price_block h3 {
  text-align: center;
  color: #008ED6;
  font-weight: bold;
}
.price_block2 h3 {
  text-align: center;
  color: black;
  font-weight: bold;
}
.price {
  background-color: #008ED6;
  color: white;
}
.price2 {
  background-color: #E5E5E5;
  color: black;
}
.price_block .price {
  text-align: center;
  line-height: 0px;
  padding: 18px;
}
.price_block2 .price2 {
  text-align: center;
  line-height: 0px;
  padding: 18px;
}
.price_block ul {
  margin-top: 7%;
  color: #909090
}
.price_block ul li {
  list-style: none;
  line-height: 30px;
}
.price_block2 ul {
  margin-top: 7%;
  color: #909090
}
.price_block2 ul li {
  list-style: none;
  line-height: 30px;
}
.price_block .btn3 {
  text-align: center;
}
.fa-check {
  background-color: #0DAA7A;
  color: white;
  border-radius: 8px;
  width: 16px;
  height: 16px;
  text-align: center;
}
.fa-close {
  background-color: #e74c3c;
  color: white;
  border-radius: 8px;
  width: 16px;
  height: 16px;
  text-align: center;
}
.btn3 {
  text-align: center;
}
.price_block .btn3 {
  text-align: center;
  background: #008ED6;
  background-image: -webkit-linear-gradient(top, #008ED6, #008ED6);
  background-image: -moz-linear-gradient(top, #008ED6, #008ED6);
  background-image: -ms-linear-gradient(top, #008ED6, #008ED6);
  background-image: -o-linear-gradient(top, #008ED6, #008ED6);
  background-image: linear-gradient(to bottom, #008ED6, #008ED6);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border: 1px solid #008ED6;
  margin-top: 4%;
  margin-bottom: 4%;
  font-weight: bold;
}
.price_block .btn3:hover {
  background: #3da4e3;
  background-image: -webkit-linear-gradient(top, #3da4e3, #3da4e3);
  background-image: -moz-linear-gradient(top, #3da4e3, #3da4e3);
  background-image: -ms-linear-gradient(top, #3da4e3, #3da4e3);
  background-image: -o-linear-gradient(top, #3da4e3, #3da4e3);
  background-image: linear-gradient(to bottom, #3da4e3, #3da4e3);
  text-decoration: none;
}
.price_block2 .btn4 {
  text-align: center;
  background: #909090;
  background-image: -webkit-linear-gradient(top, #909090, #909090);
  background-image: -moz-linear-gradient(top, #909090, #909090);
  background-image: -ms-linear-gradient(top, #909090, #909090);
  background-image: -o-linear-gradient(top, #909090, #909090);
  background-image: linear-gradient(to bottom, #909090, #909090);
  -webkit-border-radius: 2;
  -moz-border-radius: 2;
  border-radius: 2px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border: 1px solid #909090;
  margin-top: 4%;
  margin-bottom: 4%;
  font-weight: bold;
}
.price_block2 .btn4:hover {
  background: #909090;
  background-image: -webkit-linear-gradient(top, #909090, #909090);
  background-image: -moz-linear-gradient(top, #909090, #909090);
  background-image: -ms-linear-gradient(top, #909090, #909090);
  background-image: -o-linear-gradient(top, #909090, #909090);
  background-image: linear-gradient(to bottom, #909090, #909090);
  text-decoration: none;
}
    <div class="pricing_main">
  <div class="container">
<div class="row">
  <div class="price_wrap">
    <div class="col-xs-6 price_block">
      <h3>ANNUAL PLAN</h3>
      <div class="price">
        <p>Save 33% on the Annual Plan</p>
        <h1><strike>$37</strike> <span style="color:#FDBC37;font-weight:bold">$25</span></h1>
        <p>/billed annually</p>
      </div>
      <ul>
        <li><i class="fa fa-check"></i> Find Thousand of Profitable Keywords in Seconds</li>
        <li><i class="fa fa-check"></i> Calculate Keyword Competitiveness</li>
        <li><i class="fa fa-check"></i> Competitor analysis on Top 10 Google Results</li>
        <li><i class="fa fa-check"></i> Check Rankings of sites in Google, Yahoo, and Bing</li>
        <li><i class="fa fa-check"></i> Import Lists of 10,000 Keywords at Once</li>
        <li><i class="fa fa-check"></i> Get Access to the Platinum VIP Facebook Community</li>
        <li style="font-weight:bold"><i class="fa fa-check"></i> FREE Access to Long Tail University ($197 in Value)</li>
        <li style="font-weight:bold"><i class="fa fa-check"></i> Save 33% on Platinum with the Annual Plan</li>
      </ul>
      <center>
        <button type="button" class="btn3">ORDER NOW</button>
      </center>
    </div>
    <div class="col-xs-6 price_block2">
      <h3>MONTHLY PLAN</h3>
      <div class="price2">
        <p>Monthly Payment</p>
        <h1>$37</h1>
        <p>/billed monthly</p>
      </div>
      <ul>
        <li><i class="fa fa-check"></i> Find Thousand of Profitable Keywords in Seconds</li>
        <li><i class="fa fa-check"></i> Calculate Keyword Competitiveness</li>
        <li><i class="fa fa-check"></i> Competitor analysis on Top 10 Google Results</li>
        <li><i class="fa fa-check"></i> Check Rankings of sites in Google, Yahoo, and Bing</li>
        <li><i class="fa fa-check"></i> Import Lists of 10,000 Keywords at Once</li>
        <li><i class="fa fa-check"></i> Get Access to the Platinum VIP Facebook Community</li>
        <li style="font-weight:bold"><i class="fa fa-close"></i> FREE Access to Long Tail University ($197 in Value)</li>
        <li style="font-weight:bold"><i class="fa fa-close"></i> Save 33% on Platinum with the Annual Plan</li>
      </ul>
      <center>
        <button type="button" class="btn4">ORDER NOW</button>
      </center>
    </div>
  </div>
</div>
  </div>
</div>

    https://jsfiddle.net/afelixj/vxw9r0p1/

    Edit

    Fiddle updated with below styles. Also added bootstrap css – 

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


  display: inline-block;
  float: none;
  text-align: left;
}
.price_wrap .price_block2 {


    display: inline-block;
    float: none;
    text-align: left;
}

    https://jsfiddle.net/afelixj/vxw9r0p1/1/

    Login or Signup to reply.
  4. 0

    As you got answer but this may still be useful information for you:

    As you have used a static width by using

    .price_block{width: 37%!important;}
.price_block2{width: 37%!important;}

    This leaves the rest of the gap to be 13%. If you want to use these static widths then by simply adding 

    .price_wrap
{
  padding-left:13%;
}

    in your css and gap will recover and columns will be in centre.

    PS: Keep in mind, if you are using float then don’t forget to use clear:both or else you will get some white space issue or you will get trouble while tracing them in inspect element in browser.

    Demo:JSFiddle link

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search