How to Draw a Circle With Text in the Middle

How to draw a circle with text in the middle?

Setting a line-height the same value as the height of the div will show one line of text vertically centered. In this example the height and line-height are 500px.

Example

JSFiddle

.circle {
  width: 500px;
  height: 500px;
  line-height: 500px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  text-align: center;
  background: #000
}

<div class="circle">Hello I am A Circle</div>

how to draw circle with text in middle and an image as a background of the circle?

#circle {  width: 200px;  height: 200px;  border-radius: 50%;  font-size: 50px;  color: #2098D1;  line-height: 200px;  text-align: center;  background-image: url("http://intrawallpaper.com/static/images/abstract-mosaic-background.png");  background-size: 150% 150%;  background-repeat: no-repeat;  background-position: 97% 75%;}

<div id="circle"> Hello </div>

align text in the middle of a circle with css

As long as you only have one line of text, a simple trick is to set its line-height to the height of the circle:

.circle {  background: rgba(72, 156, 234, 1);  border-radius: 50%;  height: 80px;  width: 80px;  position: relative;  box-shadow: 0 0 0 5px #F1F1F1;  margin: 10px;  color: #6F0;  vertical-align: middle;}
.text_circle {  font-size: 36px;  margin-bottom: 50px;  line-height: 80px;}

<div align="center" class="circle"><span class="text_circle">5</span></div>

HTML How to draw circle with huge number in exact center?

You're setting the line height to be more than the area height.

line-height: 300px;

Demo

Drawing a text in the middle of an ellipse

You need to use an overload of the DrawString method that takes a StringFormat argument and then use the StringFormat.Alignment and StringFormat.LineAlignment to align the string in the center and the middle of the circle:

using (StringFormat sf = new StringFormat())
{
    sf.Alignment = StringAlignment.Center;
    sf.LineAlignment = StringAlignment.Center;

    Graphics.DrawString($"s{i + 1}", panel.Font, new SolidBrush(Color.White),
                        pointOnCircle.X, pointOnCircle.Y, sf);
}

I need to draw a Circle with text in the middle, help please

For Drawing a circle in Swing:

public class CirclePanel extends JPanel {
@Override
protected void paintComponent(Graphics g) {
    //Adding  super.paintComponent....  
    super.paintComponent(g);

    g.drawOval(0, 0, g.getClipBounds().width, g.getClipBounds().height);
    }
}

For adding text inside the circle you can use GridBagLayout.i.e.

CirclePanel panel = new CirclePanel();
panel.setLayout(new GridBagLayout());
GridBagConstraints cl;
cl = new GridBagConstraints();
cl.gridy = 0;
panel.add(new JLabel("Hello"), cl);

Here is the Link in that you can use swing to draw a circle using Canvas.

Draw canvas with color and text

How to Draw a Circle With Text in the Middle