在圆形中居中文本和容器

Question

我这里有一个Bootply链接：http://www.bootply.com/XLGE6Vpjov，需要将三个圆圈居中，并且圆圈内的文本在水平和垂直方向上都居中。

如何实现垂直居中呢？

我知道在IE8中不支持border-radius属性，但是如果只在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;
        }

- ttmt

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>

- Bojan Petkovski

---

这个解决方案是最符合我需求的。谢谢！ - th3morg

是的，最好的解决方案。 - Aarthi Chandrasekaran

Answer 2

你的回答是...

.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</span></p>
     </div>
  
   </div>
</div>

- Avinash Antala

Answer 3

一种解决方法是在您的.circle类中添加line-height:200px;，这样行高将与圆本身具有相同的高度。

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

- Raul Marrero Rodríguez

Answer 4

你可以使用display: table-cell代替inline-block 示例

.circle {
  display: table-cell;
}

- Colin Bacon