我在这里有一个Bootply：
http://www.bootply.com/XLGE6Vpjov
我需要在容器中居中的3个圆圈,然后我需要里面的文本水平和垂直居中.
如何将文本垂直居中？
我知道边界半径在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;
}
解决方法
你可以尝试像这样的
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>
