Search
Search

How can i center an inner div?

debugcn Published at Dev
14
Chonchol Mahmud

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>

Felix A J

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/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How can i center an inner div?

From Dev

How can I center a div inside a div?

From Dev

How can I center vertically a div in bootstrap?

From Dev

How can I center div, inside other div with bootstrap classes?

From Dev

How to put the text at the center of inner div?

From Dev

How can I detect the inner html change in a div with angular 2?

From Dev

How can I center a right-aligned DIV?

From Dev

How can I use CSS to center text in DIV

From Java

How can I center an absolutely positioned element in a div?

From Dev

How can I center data inside parent div?

From Dev

How can I center text inside a div element using CSS

From Dev

How can I center data inside parent div?

From Dev

How can I vertically center a div without knowing the parent height?

From Dev

How can I correctly center this div into its container? What is wrong?

From Dev

How can I use CSS to center text in DIV

From Dev

how can i set asp.net gridview to center of div?

From Dev

How can I center a div element no matter what the resolution

From Dev

How can I center horizontally a Grid-block inside of a div?

From Dev

How do I center a div in another div?

From Dev

I can't get div to center in HTML

From Dev

Why can't I center this simple div?

From Dev

How can i center this menu?

From Dev

How can I center content

From Dev

How can I vertically center two spans on either side of a div, relative to that div?

From Dev

How can I center a div inside another div, what is the simplest way?

From Dev

How can I make my div's svg background image scale dynamically and stay in the center of the div

From Dev

How can I stop my center div from changing position after I SlideUp another divs?

From Dev

How can I stop my center div from changing position after I SlideUp another divs?

From Dev

How can I make a inner-div fixed on the bottom of outer-div, so it moves when the outer-div expands

Related Related

  1. 1

    How can i center an inner div?

  2. 2

    How can I center a div inside a div?

  3. 3

    How can I center vertically a div in bootstrap?

  4. 4

    How can I center div, inside other div with bootstrap classes?

  5. 5

    How to put the text at the center of inner div?

  6. 6

    How can I detect the inner html change in a div with angular 2?

  7. 7

    How can I center a right-aligned DIV?

  8. 8

    How can I use CSS to center text in DIV

  9. 9

    How can I center an absolutely positioned element in a div?

  10. 10

    How can I center data inside parent div?

  11. 11

    How can I center text inside a div element using CSS

  12. 12

    How can I center data inside parent div?

  13. 13

    How can I vertically center a div without knowing the parent height?

  14. 14

    How can I correctly center this div into its container? What is wrong?

  15. 15

    How can I use CSS to center text in DIV

  16. 16

    how can i set asp.net gridview to center of div?

  17. 17

    How can I center a div element no matter what the resolution

  18. 18

    How can I center horizontally a Grid-block inside of a div?

  19. 19

    How do I center a div in another div?

  20. 20

    I can't get div to center in HTML

  21. 21

    Why can't I center this simple div?

  22. 22

    How can i center this menu?

  23. 23

    How can I center content

  24. 24

    How can I vertically center two spans on either side of a div, relative to that div?

  25. 25

    How can I center a div inside another div, what is the simplest way?

  26. 26

    How can I make my div's svg background image scale dynamically and stay in the center of the div

  27. 27

    How can I stop my center div from changing position after I SlideUp another divs?

  28. 28

    How can I stop my center div from changing position after I SlideUp another divs?

  29. 29

    How can I make a inner-div fixed on the bottom of outer-div, so it moves when the outer-div expands

HotTag

Archive