I was wondering if theres a way to align a div element to the middle of the page using HTML (no css preferably).

The code is

<div class="colorlib-pricing" >
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 text-center colorlib-heading animate-box">
                    <h2>Pricing</h2>
                    <p>We set our price with affordability in mind, we do not want to overcharge users for a good client, we find our clients' price reasonable and competitive.</p>
                </div>
            </div>
                <div class="col-md-3 text-center animate-box">
                    <div class="pricing">
                        <h2 class="pricing-heading">Wave Client</h2>
                        <div class="price"><sup class="currency">$</sup>19.99<small>LIFETIME</small></div>
                        <p>With permanent access, fast and frequent updates Wave Client will surely fulfill your cheating needs.</p>
                        <p><a href="https://waveclient.selly.store/product/49b4ed5e" class="btn btn-primary">Purchase Wave</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Thanks alot in advance.

4 Answers

0
John Doe On
<div style="width: 500px; margin: 0 auto;">I will be aligned in the center</div>

If you must have truly no CSS you can try

<div align="center">
  <div>I will be aligned in the center</div>
</div>
0
Community On

Try adding center tags around your code, like this:

<center>
    <p>I have been centered</p>
</center>

EDIT: Someone said that the <center> tag is obsolete (they are right), so try this:

<div style="text-align: center">
    <p>I have been centered</p>
</div>
0
Community On

you need to set child div margin auto.. Note: if you use display property then might its not work for some display properties - such as absolute, fixed etc.

.parentDiv{width:100%; 
height:100px; 
background: #504f4f;
}

.childDiv{
margin:auto; 
width:60%; 
background: #85ffcc; 
height:100px;
}
<div class="parentDiv" >
 <div class="childDiv" >      
 </div>
</div>

0
Nick Parsons On

Since you seem to be using bootstrap 3 you can change the following div <div class="col-md-3 text-center animate-box"> to:

<div class="col-md-4 col-md-offset-4 text-center animate-box">

See working example below:

  

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="colorlib-pricing">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 text-center colorlib-heading animate-box">
        <h2>Pricing</h2>
        <p>We set our price with affordability in mind, we do not want to overcharge users for a good client, we find our clients' price reasonable and competitive.</p>
      </div>
    </div>
    <div class="col-md-4 col-md-offset-4 text-center animate-box">
      <div class="pricing">
        <h2 class="pricing-heading">Wave Client</h2>
        <div class="price"><sup class="currency">$</sup>19.99<small>LIFETIME</small></div>
        <p>With permanent access, fast and frequent updates Wave Client will surely fulfill your cheating needs.</p>
        <p><a href="https://waveclient.selly.store/product/49b4ed5e" class="btn btn-primary">Purchase Wave</a></p>
      </div>
    </div>
  </div>
</div>

Another approach could also be to use the center-block class. However, you would also need to add a css style of float: none; to your div:

<div class="col-md-4 center-block text-center animate-box" style="float: none;">

See working example below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="colorlib-pricing">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2 text-center colorlib-heading animate-box">
        <h2>Pricing</h2>
        <p>We set our price with affordability in mind, we do not want to overcharge users for a good client, we find our clients' price reasonable and competitive.</p>
      </div>
    </div>
    <div class="col-md-4 center-block text-center animate-box" style="float: none;">
      <div class="pricing">
        <h2 class="pricing-heading">Wave Client</h2>
        <div class="price"><sup class="currency">$</sup>19.99<small>LIFETIME</small></div>
        <p>With permanent access, fast and frequent updates Wave Client will surely fulfill your cheating needs.</p>
        <p><a href="https://waveclient.selly.store/product/49b4ed5e" class="btn btn-primary">Purchase Wave</a></p>
      </div>
    </div>
  </div>
</div>