2

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.

Improve this question
8
  • Do you mean if the text length is much longer, it should wrap along the circle line? Commented Oct 9, 2015 at 14:11
  • Yes Pangloss. And the circle should be resized if the text is long enough to overflow the circle area. Commented Oct 9, 2015 at 14:13
  • Wait, you can't have both, either wrap text or keep text on one line but increase the circle size. Commented Oct 9, 2015 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. Commented Oct 9, 2015 at 14:18
  • 1
    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. Commented Oct 9, 2015 at 14:58

5 Answers 5

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

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.

Improve this answer

Comments

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

1 Comment

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

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/

Improve this answer

1 Comment

The circle turned egg shaped after inserting a lot of text.
-1

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/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.