testo Center e contenitori all'interno di un cerchio

Question

Ho un bootply qui - http://www.bootply.com/XLGE6Vpjov

Ho bisogno i 3 cerchi centrati in là contenitori e quindi ho bisogno il testo all'interno di essere centrato orizzontalmente e verticalmente.

Come si può centrare il testo verticalmente?

So che il raggio di confine non funzionerà in IE8, ma non mi interessa che sia un quadrato lì.

 <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

Si può provare qualcosa di simile http://jsfiddle.net/6cygbd37/1/

Vedi l'esempio di lavoro qui di seguito:

/*--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

Una soluzione potrebbe essere aggiungere line-height:200px; alla classe .circle Così la linea di altezza sarà la stessa altezza del cerchio stesso.

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

Answer 3

È possibile utilizzare display: table-cell invece di inline-block

Esempio

.circle { 
    display: table-cell; 
} 

Answer 4

sono riuscito raggiungimento di questo aggiungendo quanto segue alla classe cerchio:

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

Se si utilizza circleSize = 200px e fontsize = 20

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

semplice ma funziona, spero che aiuti.

Answer 5

la vostra risposta è ...

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

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