[英]Center text and container inside a circle
I have a Bootply here: http://www.bootply.com/XLGE6Vpjov 我在这里有一个Bootply: http : //www.bootply.com/XLGE6Vpjov
I need the 3 circles centered in there containers and then I need the text inside to be centered horizontally and verticaly. 我需要在容器中居中的3个圆圈然后我需要里面的文本水平和垂直居中。
How can I center the text vertically? 如何将文本垂直居中?
I know the border-radius
won't work in IE8 but I don't mind it being a square there. 我知道
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;
}
You can try something like this http://jsfiddle.net/6cygbd37/1/ 你可以试试这样的东西http://jsfiddle.net/6cygbd37/1/
See working example below : 见下面的工作示例:
/*--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>
Your Answer is ... 你的答案是......
.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>
One solution could be add line-height:200px;
一种解决方案可以是添加
line-height:200px;
to your .circle
class So the line Height will be the same height as the circle itself. 到你的
.circle
类所以行高度与圆圈本身的高度相同。
.circle {
/* your code */
line-height:200px;
}
You can use display: table-cell
instead of inline-block
您可以使用
display: table-cell
而不是inline-block
Example 例
.circle {
display: table-cell;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.