How to align text inside a circle dynamically?

Question

I have a div with some random text.I have designed the div as a circle. I want to align the text inside the circle in the center. I can do this manually i mean for a static text i can do this. I want to know if there is any way to do this dynamically. I want to create the circle depending on the text size automatically and positioned the text in the center and aligned.

I have the code here :

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <section class="main">
            <div id="greeting">
                <p>Hi, This is the greeting part of my site.</p>
            </div>
        </section>
    </body>
</html>

Thank you.

Do you mean if the text length is much longer, it should wrap along the circle line? — Stickers, Oct 09 '15 at 14:11
Yes Pangloss. And the circle should be resized if the text is long enough to overflow the circle area. — Md Sabbir Alam, Oct 09 '15 at 14:13
Wait, you can't have both, either wrap text or keep text on one line but increase the circle size. — Stickers, Oct 09 '15 at 14:15
I mean till the text is short enough to be wrapped in the circle only the text will align. But if the text is longer the circle will resized slightly. I am guessing some javascript work might be needed. — Md Sabbir Alam, Oct 09 '15 at 14:18
can you please help with the JS code ? @Paulie_D ? Thank you. — Md Sabbir Alam, Oct 09 '15 at 14:47
We're not here to write code for you. You'll have to do some research either via Google or search SO...make an attempt and, if you still can't get it to work, ask a **new** question. — Paulie_D, Oct 09 '15 at 14:58

score 2 · Answer 1 · answered Oct 09 '15 at 13:59

2

You can use

#greeting{
    display: flex;
    justify-content: center;
    align-items: center;
}

How it works:

justify-content defines where flex items will align according to the main axis (horizontally in our case)

align-items does the same with the axis perpendicular to the main one (vertically in our case).

It works for any element, and it's probably the easiest and shortest way to center something horizontally and vertically

answered Oct 09 '15 at 13:59

divoom12

802
4
12

your way is fine with the text alignment. Thank you. I need one more thing. how can i resize the circle according to the text size ? – Md Sabbir Alam Oct 09 '15 at 14:10

score 2 · Accepted Answer · edited May 23 '17 at 12:33

I have solved the problem after doing a lot of searching. I got my one and only clue from here :

Then I have tried a lot of time and finally I have done it. Here is the javascript code:

<script type="text/javascript">
    var gr = $('#gr').width();
    var grt = $('#greeting').width();
    //alert(grt/2.5 >=gr);
    if((grt/2.5)>=gr)
    {
        $('#gr').css({'height':gr+'px'});
    }
    else{
        $('#greeting').css({'width':gr*2.5+'px'});
        $('#greeting').css({'height':gr*2.5+'px'});
    }
</script>

Here is the HTML code:

<div id="greeting">
    <p id="gr">
         Hi there this is my greeting part.
    </p>
</div>

finally here is the CSS part:

#greeting{
color: #F8F8F8;
margin:5px;
width:0px;
border-radius: 50%;
background-color: #F99793;
text-align: center;
 display: flex;
justify-content: center;
align-items: center;
}
#gr{
isplay: flex;
justify-content: center;
align-items: center;
word-wrap:break-word;
}

You can check this out in here.

score 0 · Answer 3 · answered Oct 09 '15 at 14:00

0

Easy - use transform. This is CSS3 and remember to prefix the transform property (-webkit-, etc).

Fiddle for you

#greeting{
    position: relative;
    height:450px;
    width:450px;
    border-radius: 50%;
    background-color: #779EC6;
    text-align: center;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}

answered Oct 09 '15 at 14:00

Rob Scott

7,921
5
38
63

after running with a different length text the alignment was broken. I am trying to find a way in which the circle size, text positioning is automatically calculated. I think we need some javascript to do this. But i don't know how to do this. Thank you for your answer btw. – Md Sabbir Alam Oct 09 '15 at 14:06

score 0 · Answer 4 · answered Oct 09 '15 at 14:30

HTML:

<section class="main">
    <div id="greeting">
        <p>Hi, This is the greeting part of my site.</p>
    </div>
</section>

CSS:

section.main{
    display: table;
    border:  2px solid #999;
    height: 200px;
    width: 200px;
    background-color: #ccc;
    border-radius: 50%;
    padding: 7rem;
}

section.main > #greeting{
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

FIDDLE: http://jsfiddle.net/y3699smx/

The circle turned egg shaped after inserting a lot of text. – Md Sabbir Alam Oct 09 '15 at 14:39 — Md Sabbir Alam, Oct 09 '15 at 14:39

score -1 · Answer 5 · answered Oct 09 '15 at 14:21

Set section with class main to display:table; and give display: table-cell; and vertical-align: middle; style to #greeting. If text size will increase in this code, alignment will get adjust accordingly.

See Working example http://jsfiddle.net/guruWork/oc9mrz38/

How to align text inside a circle dynamically?

5 Answers5