title: aligning div at center text-align not working
body: <p>I want the circle to be aligned in center in 768 grid </p>
  
  <p><a href="http://jsfiddle.net/8dEN3/1/" rel="nofollow"><strong>Demo</strong></a></p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="About_Container"&gt;
    &lt;div class="Icon_Wrapper"&gt;
      &lt;div class="Circle"&gt;
        &lt;div class="CircleWrapper"&gt; &lt;span class="Icon"&gt; 
     &lt;img src="http://livedemo00.template-help.com/drupal_50108/sites/default/files/icon-service-3.png" /&gt; &lt;/span&gt;
     &lt;span class="Text"&gt; CUSTOMER GUARANTEEE &lt;/span&gt; &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="Text_Wrapper"&gt; Vestibulum quis felis ut enim aliquam iaculis.
      Nullam pharetra tortor at quam viverra volutpat. 
      Phasellus vel faucibus dolor. Curabitur ac ni
      i non metus dignissim dapibus eu vel nibh. Phasellus &lt;/div&gt;
    &lt;div class="Link_Wrapper"&gt; &lt;a href="#"&gt;READ MORE&lt;/a&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>@media ( min-width: 120px) and (max-width:768px) {
  
  #Container_About {
      min-height: 1291px;
      background: #404040;
      width: 100%;
      float: left;
  }
  
  .TradeSlogan {
      font-size: 60px;
      line-height: 66px;
      font-family: 'Open Sans', sans-serif;
      color: #fff;
      margin-bottom: 25px;
      font-weight: 800;
      margin: 0;
      outline: 0;
      padding: 0;
      vertical-align: baseline;
  }
  
  .SomeTextWrapper {
      color: #949393;
      margin: 10px;
  }
  
  .SomeTextWrapper  .SomeTextWrapper:before,  .SomeTextWrapper:after {
      content: " "; /* 1 */
      display: table; /* 2 */
  }
  
  .SomeTextWrapper:after { clear: both; }
  
  /**
       * For IE 6/7 only
       * Include this rule to trigger hasLayout and contain floats.
       */
  
  .SomeTextWrapper {  *zoom: 1;
  }
  
  .About_Container {
      height: 100%;
      width: 100%;
  }
  
  .Circle {
      margin: 10px;
      height: 170px;
      width: 170px;
      border-radius: 170px;
      background: #949393;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
  }
  
  .Icon_Wrapper {
      text-align: left;
      height: 100%;
      width: 100%;
  }
  
  .CircleWrapper { padding: 10px; }
  
  .CircleWrapper Icon, Text {
      float: left;
      height: 44%;
      width: 100%;
      margin: 3%;
  }
  
  .Text {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      color: #03c7de;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 1.5px;
  }
  
  .Text_Wrapper {
      margin: 25px;
      color: #03c7de;
      font-weight: 300;
      font-size: 11px;
      letter-spacing: 1.5px;
  }
  
  .Link_Wrapper {
      padding: 20px;
      text-align: right;
  }
  
  .Link_Wrapper a {
      color: #03c7de;
      font-weight: 300;
      font-size: 17px;
      letter-spacing: 1.5px;
  }
  </code></pre>