如何在跨度文本上使背景色变为圆形

Question

I have a spanned text 1 with background color red. I want to make the background color round which will enclose the spanned text 1 . But what i have at the moment isn't doing the trick.

How can i get this done?

 .text-span{ background:red; border-radius:20px; } 

 <span class="text-span">1</span><span>info</span> 

Answer 1

First, you need to display it inline-block. This allows you to manipulate its size.

Then, you need to give him the same height, same width to make it square.

After that, you will make a border radius of 50% so that it becomes round.

Finally, you can center it by giving it the line-height of the height, and center aligning the text.

And voilà !

 .text-span{ background:red; border-radius:50%; height: 26px; width: 26px; line-height: 26px; display: inline-block; text-align: center; margin-right: 6px; } 

 <span class="text-span">1</span><span>info</span> 

Answer 2

Try this :

 .text-span{ background:red; border-radius:50%; display:inline-block; width:20px; height:20px; text-align:center; } 

 <span class="text-span">1</span><span>info</span> 

Hope it helps!!

Answer 3

You can't absolutely center the content inside the circle using just the padding. I suggest you this snippet to center anything inside it with a simple snippet.

This solution have just a note, you need to set the circle size big enough or crop the content with the text-overflow property.

 .text-span { display: inline-block; background: rebeccapurple; border-radius: 50%; position: relative; width: 30px; height: 30px; font-family: sans-serif; margin-right: 8px; vertical-align: middle; } .text-span::before { content: attr(data-content); color: #FFF; position: absolute; top: 50%; left: 50%; font-size: 13px; font-weight: 700; line-height: 1; transform: translate(-50%, -50%); } 

 <div> <span class="text-span" data-content="1"></span> info </div> <div> <span class="text-span" data-content="99"></span> info </div>