Requirements: Use HTML to draw a circle, a word in the circle to describe it, and to center the word.
Analysis: First draw a circle, my first idea is to use pictures, and was scolded a meal, and then think to use canvas painting, and was scolded a meal, this just noticed that CSS exists a property Border-radius.
Border-radius was used to add rounded corners to the div, *px or percent, and this value refers to the radius of the fillet (imagine, rounded corners, it must be centered on a point, a point for the radius of the painting, and at Four corners, with a radius, in fact, no longer need to specify the center of the circle). So to extend it, if the specified parameter value is greater than or equal to the width of the Div, then the thing drawn should be a circle.
Try this:
<!doctype html>The effect chart is as follows:
OK, now that we've got a circle, and the circle is right in the center of the screen (the code looks at it), how do you add words to the circle? Perhaps the most direct way is to write directly inside the div, by using Text-align to center the text, but at this time is not at the center of the circle, but only in the center of the document flow, then how to position the word in the center of the circle, in other words, how to vertically centered.
The answer is to use line-height,line-height simply to set the line height. Because the row height is exactly the size of the font in the original document stream, what happens if the row height is set to the height of the entire circle. Naturally, the font will be at the center of the line, so that the vertical center is achieved.
The code is as follows:
Text-align:center; line-height:300px; font-size:30px;There is also an interesting problem, we set the diameter of the circle is 300px, the actual picture is not the diameter of 300px, you know why.
Reference Links:
Write link content here
Write link content here
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
