Hogyan készítsünk egy kört a html, saddy - blog html, css, elektronika, internet és csak érdekes dolgok

Üdvözlet! Ma megmutatom, hogyan kell egy kört a html, és hogyan lehet egy kört a szöveg közepén. Nos, vagy az ikon a kör közepén.
Kezdjük egy négyzetet.

Csak hogy ez egy négyzet, az első, és adja meg a szín és a keret 1 pixel.

Az eredmény egy négyzet a szöveggel:

Most arra van szükség, hogy összehangolják a szöveget a közepén. Van egy csomó módszer erre, de jobb a mi esetünkben a következő lesz:

• Így a vonal magassága azonos a magassága egység (ahogy összehangolják függőlegesen)
• Yuzaem címkét vízszintesen

Nos, egy esztétikus megjelenés növeli a font, és adja meg színét.

Nos, ez történt itt is:

Most már tudjuk, hogyan kell a szöveget igazítani a tér közepén a html. Meg kell csinálni a tér - kör.

A jobb érthetőség kedvéért nézzük finoman lekerekített sarkokkal.

Íme négyzet alakú, lekerekített sarkokkal:

De a tér nagyon lekerekített sarkokkal (kör):

Ha kíváncsi vagy, hogyan border-radius kell adni a téren annak érdekében, hogy kerek, pontosan a fele az egyik oldalán, és ebben az esetben 150 pixel. Ha adsz neki egy nagyobb border-radius mint a fele az oldalon, akkor semmi sem fog változni. De ha adsz egy kis valamit látni kell, hogy ez nem egy kör.
Ha a tér a magasság nem osztható 2, majd egy nagy border-radius a padlón a pixel, mint a fele a felek.
Például oldalán 35 pixel. Fele 17,5 pixel. Ahhoz, hogy egy kört, meg kell border-radius 18 pixel.
Ha azt szeretnénk, hogy összehangolják az ikon a kör közepén, nem ugyanaz, mint a szöveg.

Kép beillesztése a HTML kódot tett egyenlő a sor magassága blokk magassága, és használja a vízszintes igazítás.