ttmt ttmt - 1 month ago 13
CSS Question

Center text and container inside a circle

I have a bootply here - 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.

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.

<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;
}

Answer

You can try something like this http://jsfiddle.net/6cygbd37/1/

The HTML

<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>

The 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;
}