Salutări! Astăzi vă voi arăta cum să faceți un cerc pe html și cum să faceți un cerc cu text centrat. Ei bine, sau cu icoana din centrul cercului.
Să începem cu un bloc pătrat.
Faceți-o mai întâi pătrat și dați-i o culoare și un cadru de 1 pixel.
Acesta este pătratul cu textul:
Acum trebuie să aliniem textul în centrul pătratului. Există o mulțime de metode de a face acest lucru, dar ceea ce este corect în cazul nostru este acesta:
- Facem ca inaltimea liniei sa fie egala cu inaltimea blocului (asa ca aliniem-o verticala)
- Yuzay tag alinierea orizontală
Ei bine, pentru o privire mai estetică, vom mări fontul și îi vom da o culoare.
Ei bine, sa dovedit aceasta:
Acum știm cum să aliniem textul în centrul pătratului cu html. Rămâne să faci un cerc cu un pătrat.
Pentru o înțelegere mai bună, să mergem mai întâi în colțuri.
Iată un pătrat cu colțuri rotunjite:
Dar pătratul cu colțuri foarte rotunjite (cerc):
Dacă vă întrebați ce rază de graniță trebuie să dați un pătrat pentru a deveni un cerc, atunci acesta este exact jumătate din partea sa și, în cazul nostru, 150 de pixeli. Dacă îi dați o rază de graniță mai mare decât jumătatea laturii, nimic nu se va schimba. Dar dacă dai mai puțin, atunci se va vedea că nu este un cerc.
Dacă înălțimea pătratului nu este divizibilă cu 2, atunci raza de margine este mai mare cu jumătate de pixel decât jumătatea laturii.
De exemplu, partea este de 35 de pixeli. Jumătate sunt 17,5 pixeli. Pentru a deveni un cerc, trebuie să dați o rază de graniță de 18 pixeli.
Dacă doriți să aliniați pictograma la centrul cercului, faceți același lucru cu cel al textului.
Am inserat imaginea în cod html, am făcut înălțimea liniei egale cu înălțimea blocului și am folosit alinierea orizontală.
Trimiteți-le prietenilor: