我这里有一个 Bootply:http://www.bootply.com/XLGE6Vpjov http://www.bootply.com/XLGE6Vpjov
我需要将 3 个圆圈置于容器中,然后将其中的文本水平和垂直居中。
如何使文本垂直居中?
我知道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;
}
你可以尝试这样的事情http://jsfiddle.net/6cygbd37/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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)