Text center and container inside circle

Question

I have bootply here - http://www.bootply.com/XLGE6Vpjov

I need 3 circles centered in the containers, and then I need the text inside to be horizontally and vertically.

How can I center the text vertically?

I know that the border radius will not work in IE8, but I do not mind that it be a square.

<div class="container"> <div class="row"> <div class="col-md-4 block text-center"> <p class="circle">Some Text here Some text here Some text here Some text here</p> </div> <div class="col-md-4 block"> <p class="circle">Some Text here</p> </div> <div class="col-md-4 block"> <p class="circle">Some More Text here</p> </div> </div> </div> .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; } 

Answer 1

You can try something like this http://jsfiddle.net/6cygbd37/1/

See a working example below:

 /*--CSS--*/ .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; display: table; margin: 20px auto; } .circle p { vertical-align: middle; display: table-cell; } 

 <!--HTML--> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-4 block"> <div class="circle"> <p>Some Text here Some text here</p> </div> </div> <div class="col-md-4 block"> <div class="circle"> <p>Some Text here</p> </div> </div> <div class="col-md-4 block"> <div class="circle"> <p>Some More Text here</p> </div> </div> </div> </div> 

Answer 2

One solution would be to add line-height:200px; into your .circle class. Thus, the line height will be the same height as the circle itself.

 .circle { /* your code */ line-height:200px; } 

Answer 3

You can use display: table-cell instead of inline-block

Example

 .circle { display: table-cell; } 

Answer 4

I managed to achieve this by adding the following to your circle class:

 padding-top: (circleSize/2-fontSize) padding-bottom: (circleSize/2-fontSize) 

If you use circleSize = 200px and fontsize = 20

 padding-top: 80px; padding-bottom: 80px; 

Simple but it works, hope this helps.

Answer 5

Your Answer...

 .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; } .circle span{ display: table-cell; padding-top:40%; } 

 <div class="container"> <div class="row"> <div class="col-md-4 block"> <p class="circle" align="center"><span>Some Text here Some text here Some text here</span></p> </div> <div class="col-md-4 block"> <p class="circle" align="center"><span>Some Text here Some text here Some text here</span></p> </div> <div class="col-md-4 block"> <p class="circle" align="center"><span>Some Text here Some text here Some text here</span></p> </div> </div> </div>