центр текст и контейнер внутри круга

Question

У меня есть bootply здесь - http://www.bootply.com/XLGE6Vpjov

мне нужна 3 круга, сосредоточенные в там контейнеры, а затем мне нужно текст внутри, чтобы быть в центре по горизонтали и verticaly.

Как можно центрировать текст по вертикали?

Я знаю, что радиус границы не будет работать в IE8, но я не против, чтобы это был квадрат.

 <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

Вы можете попробовать что-то вроде этого http://jsfiddle.net/6cygbd37/1/

См рабочий пример ниже:

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

Одним из решений может быть добавить line-height:200px; к вашему .circle класс Таким образом, линия высота будет такой же высоты, как и сам круг.

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

Answer 3

Вы можете использовать display: table-cell вместо inline-block

Пример

.circle { 
    display: table-cell; 
} 

Answer 4

мне удалось добиться, добавив следующую строку в ваш класс окружности:

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

Если вы используете circleSize = 200px и размер шрифта = 20

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

Простой, но это работает, надеюсь, что это поможет.

Answer 5

Ваш ответ ...

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