CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Md Sabbir Alam
Md Sabbir Alam

Reputation: 5054

How to align text inside a circle dynamically?

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.

Upvotes: 2

Views: 756

Answers (5)

Md Sabbir Alam
Md Sabbir Alam

Reputation: 5054

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.

Upvotes: 2

Bustikiller
Bustikiller

Reputation: 2498

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/

Upvotes: 0

Guru
Guru

Reputation: 631

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/

Upvotes: -1

Rob Scott
Rob Scott

Reputation: 8049

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

Upvotes: 0

divoom12
divoom12

Reputation: 812

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

Upvotes: 2

Related Questions