Vertical align text with multiple rows in a CSS circle

+4 votes
asked Feb 6, 2015 by topr

I've created a circle that contains a text, and the text needs to always be centered. Simple enough, and I've found a lot of examples of this with words on one row using line-height for example.

My problem is that the text will sometimes contain one row, sometimes two and sometimes three and I can't get that to work.

Any ideas?

I've created a fiddle here with three examples.

HTML:

<div class="container">
    <div class="splash">Lorem</div>
</div>
<div class="container">
    <div class="splash">Lorem ipsum</div>
</div>
<div class="container">
    <div class="splash">Lorem ipsum dolor</div>
</div>

CSS:

.container{
    position: relative;
    width: 70px;
    display: inline-block;
}
.splash {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    height: 70px;
    width: 70px;
    background: green;
    color: white;
    position: absolute;
    overflow: hidden;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}

3 Answers

+2 votes
answered Feb 6, 2015 by naeem-shaikh

see this http://jsfiddle.net/tdtx3cfe/2/, I got it working with a little different approach, inserting the text into the span and making it display:table-cell, vertical-align:middle, change the splash to display:table, this will work even if you want to keep splash absolute

<div class="container">
    <div class="splash"><span>Lorem<span></div>
</div>
<div class="container">
    <div class="splash"><span>Lorem ipsum<span></div>
</div>
<div class="container">
    <div class="splash"><span>Lorem ipsum dolor<span></div>
</div>


.container{
    position: relative;
    width: 70px;
    display: inline-block;
}
.splash {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    height: 70px;
    width: 70px;
    background: green;
    color: white;
    position: absolute;
    overflow: hidden;
    display: table;
    text-align: center;
    vertical-align: middle;
    transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}
span{
    display:table-cell;
     vertical-align: middle;
}
+1 vote
answered Feb 6, 2015 by vangel-tzo

You could create an extra span tag inside .splash and center it via position absolute and transform translate trick

.container{
    position: relative;
    width: 70px;
    display: inline-block;
}

.splash {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    height: 70px;
    width: 70px;
    background: green;
    color: white;
    position: absolute;
    transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}

.splash span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

For a markup like this :

<div class="container">
    <div class="splash"><span>Lorem</span></div>
</div>

An example: http://jsfiddle.net/tdtx3cfe/3/

0 votes
answered Feb 6, 2015 by klaster-1

As one of the options, you can align splash with flexible boxes:

.container {
    width: 70px;
    height: 70px;
    display: inline-flex;
    border-radius: 50%;
    background: green;
    justify-content: center;
    align-items: center;
}
.splash {
    color: white;
    text-align: center;
    transform: rotate(15deg);
}
body {
    display: flex
}

I had to add body style to vertically align containers.

JSFiddle.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...