How to draw a circle with text in the middle?

by

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>

More Related Contents:

  1. How do CSS triangles work?
  2. Line before and after title over image [duplicate]
  3. Transparent arrow/triangle indented over an image
  4. Transparent text cut out of background
  5. Border-radius in percentage (%) and pixels (px) or em
  6. CSS triangle custom border color
  7. Wavy shape with css
  8. CSS Only Pie Chart – How to add spacing/padding between slices?
  9. How to add border in my clip-path: polygon(); CSS style
  10. Control the dashed border stroke length and distance between strokes
  11. Inset border-radius with CSS3
  12. css skew element and get inner rounded border top
  13. Triangle shape with background image
  14. draw diagonal lines in div background with CSS
  15. Outlining and partially filling an SVG Shape
  16. Hexagon shape with CSS3
  17. Is a concave border radius possible?
  18. Align text on slanted line
  19. Slanted Corner on CSS box
  20. CSS Transform Skew [duplicate]
  21. Circle with two borders
  22. Border within border CSS
  23. Half hexagon shape with one element
  24. Clip path inset circle?
  25. Arrow Box with CSS
  26. Transparent hollow or cut out shape in HTML
  27. Rounded side, not rounded corners
  28. Creating a droplet like border effect in css
  29. Div with cut out edges, border and transparent background
  30. Double curved shape

Leave a Comment