Uncategorized

Creating a circle with text using HTML and CSS

By June 10, 2016 No 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.