html – 圆圈内的文本和容器

发布时间：2020-12-14 18:27:35 所属栏目：资源来源：网络整理

导读：我在这里有一个Bootply： http://www.bootply.com/XLGE6Vpjov 我需要在容器中居中的3个圆圈,然后我需要里面的文本水平和垂直居中. 如何将文本垂直居中？我知道边界半径在IE8中不起作用,但我不介意它在那里是一个正方形. div class="container" div class="r

我在这里有一个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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!