title: Center text and container inside a circle
body: <p>I have a Bootply here: <a href="http://www.bootply.com/XLGE6Vpjov" rel="nofollow noreferrer">http://www.bootply.com/XLGE6Vpjov</a></p>
  
  <p>I need the 3 circles centered in there containers and then I need the text inside to be centered horizontally and verticaly.</p>
  
  <p>How can I center the text vertically?</p>
  
  <p>I know the <code>border-radius</code> won't work in IE8 but I don't mind it being a square there.</p>
  
  <pre><code>        &lt;div class="container"&gt;
              &lt;div class="row"&gt;
  
                  &lt;div class="col-md-4 block text-center"&gt;
                      &lt;p class="circle"&gt;Some Text here Some text here Some text here Some text here&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-4 block"&gt;
                      &lt;p class="circle"&gt;Some Text here&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-4 block"&gt;
                      &lt;p class="circle"&gt;Some More Text here&lt;/p&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          .block{
              border: 1px solid red;
              text-align: center;
              vertical-align: middle;
          }
          .circle{
              background: red;
              border-radius: 200px;
              color: white;
              height: 200px;
              font-weight: bold;
              width: 200px;
          }
  </code></pre>