Centrum tekst i pojemnik wewnątrz okręgu

Question

Mam bootply tutaj - http://www.bootply.com/XLGE6Vpjov

muszę 3 kręgi skupione w tam pojemników, a następnie muszę tekst wewnątrz być wyśrodkowany poziomo i verticaly.

Jak mogę wyśrodkować tekst w pionie?

Wiem, że promień obramowania nie zadziała w IE8, ale nie mam nic przeciwko temu, że jest tam kwadrat.

 <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

Można spróbować coś takiego http://jsfiddle.net/6cygbd37/1/

Zobacz przykład roboczy poniżej:

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

Jednym z rozwiązań mogłoby być dodanie line-height:200px; do klasy .circle Więc linia wysokość będzie taka sama jak wysokość samego okręgu.

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

Answer 3

Można użyć display: table-cell zamiast inline-block

Przykład

.circle { 
    display: table-cell; 
} 

Answer 4

I udało się to osiągnąć przez dodanie następujących do klasy kółko:

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

Jeśli używasz circleSize = 200px i fontsize = 20

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

proste, ale działa, mam nadzieję, że pomaga.

Answer 5

odpowiedź brzmi ...

.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>