Uncategorized

Creating a circle with text using HTML and CSS

By June 10, 2016 10 Comments

I am currently constructing a website for an interior designer, using WordPress and a theme. When my clients want a website with a blog, I normally recommend WordPress as a platform. Using a theme for the design reduces the time I charge my clients for the project.

While building the different pages of the website based on the mockups I had previously created, I encountered problems with including a circle with text on it. The visual composer of the theme I had selected for this website did not support this option.

I decided to create the element with HTML and CSS, and this was my first shot at it:

 

.circle {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 0;
    padding: 50% 0%;
    border-radius: 50%;
/* Just making it pretty */
@shadow: rgba(0, 0, 0, .1);
@shadow-length: 4px;
-webkit-box-shadow: 0 @shadow-length 0 0 @shadow;
box-shadow: 0 @shadow-length 0 0 @shadow;
text-shadow: 0 @shadow-length 0 @shadow;
   background: #000;
   color: white;
   font-family: "josefin sans", Arial Black, sans;
   font-size: 20px;
   text-align: center;
   }

This made my circle show like this, which was brilliant, as it was already responsive, but I wasn’t happy with the positioning of the text yet:

attempt-2-circle-with-text-css

I then added

line-height:0;

and as you might guess… It wasn’t a good decision:

So I decided to try a different angle and then came up with this solution:

.circle-text {
display: table-cell;
height: 200px;
/*change this and the width for the size of your initial circle*/
width: 200px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
/*make it pretty*/
background: #000;
color: #fff;
font: 18px "josefin sans", arial;
/*change this for font-size and font-family*/
}

I used display:table-cell to make it responsive, and vertical-align instead of line-height

And it works! I hope that it will be useful for you. Here is my end result:

cicrle-with-text-css

HERE IS THE HTML AND CSS

HTML

<div class="circle-text">
Para visitar el espacio es necesario tener
cita previa
</div>

CSS

.circle-text {
display: table-cell;
height: 200px; /*change this and the width
for the size of your initial circle*/
width: 200px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
/*make it pretty*/
background: #000;
color: #fff;
font: 18px "josefin sans", arial; /*change this
for font-size and font-family*/
}

You can also check it out on my codepen for the HTML and CSS.

Join the discussion 10 Comments

  • mahesh says:

    very nice post I like a lot of it
    thanks for posting

  • michal says:

    Thanks for instructions and great hints. Will you please give a clue how to change the code to put different fonts-size texts inside the circle?

    • Ana Cidre says:

      Sure! If you take a look at the css there is a font property. There you can change the 24px to make it bigger or smaller 🙂

  • Ashok Kumar says:

    Hi,
    Thanks for the nice explanation,
    But you have to add related work whatever you done, which will help us to design better.

    Suggestion: Like you can add related topics or something like that.

  • Kim says:

    Hi, I was looking for an explanation on how to do this, thanks! I am wondering: if I wanted to make 5 different circles and have different images set as backgrounds for them, what would be the best approach to do that?

    • Ana Cidre says:

      Hi Kim!!

      I would remove the background-color: #000; and add the property background-image: url("url to image goes here"); and then finally I would add a background-size of 200px to fit the circle nicely.

      Here’s the full css of that using the same html as in the post:

      .circle-text {
      display: table-cell;
      height: 200px; /*change this and the width
      for the size of your initial circle*/
      width: 200px;
      text-align: center;
      vertical-align: middle;
      border-radius: 50%;
      /*make it pretty*/
      background-image: url("https://images.unsplash.com/photo-1462953491269-9aff00919695?auto=format&fit=crop&w=334&q=80%20334w");
      background-repeat: no-repeat;
      background-size: 200px;
      color: #fff;
      font: 18px "josefin sans", arial; /*change this
      for font-size and font-family*/
      }

      Credits to: Linnea Sandbakk on Unsplash for the photo

  • Arjun says:

    Thanks for sharing! 🙂

  • Ernesta says:

    Thank you! This was very helpful 🙂

Leave a Reply