Kaip centruoti tekstą (horizontaliai ir vertikaliai) div viduje

Kaip Centruoti Teksta Horizontaliai Ir Vertikaliai Div Viduje



Kurdami tinklalapius kūrėjai gali pridėti įvairių komponentų, įskaitant vaizdus, ​​tekstą, lenteles ir kt. Be to, tekstas gali būti sulygiuotas centre, naudojant kelias CSS ypatybes. Populiariausias būdas horizontaliai centruoti tekstą yra naudoti „ teksto lygiavimas “ atributas. Be to, taip pat galite naudoti „ linijos aukštis “ ir „ vertikaliai išlyginti “ atributai, skirti vertikaliai išlygiuoti tekstą.

Šiame įraše bus nurodytas metodas, kaip centruoti tekstą vertikaliai ir horizontaliai skyrelyje:





Kaip centruoti tekstą horizontaliai div viduje?

Norėdami centruoti tekstą horizontaliai „div“, patikrinkite pateiktą procedūrą.



1 veiksmas: sukurkite „div“ konteinerį



Iš pradžių sukurkite „div“ konteinerį naudodami „

“ elementas. Tada įterpkite „ id “ atributas, esantis div atidarymo žymoje. Po to įterpkite tekstą tarp „div“ žymos:



< div id = „suderinti turinį“ >
„Linuxhint“ yra viena geriausių svetainių dėl turinio kūrimas.
div >


Išvestis


2 veiksmas: pasiekite „div Container“, kad galėtumėte išlygiuoti tekstą centre



Dabar pasiekite div konteinerį naudodami „ id ' atributo pavadinimas su parinkikliu ' # “ ir pritaikykite šias CSS ypatybes:

#align-content{
plotis: 80 % ;
marža: 0 automatinis;
pamušalas: 20px;
fonas: #c8edf3;
teksto lygiavimas: centre;
spalva: rgb ( 49 , penkiolika , 240 ) ;
}


Čia:

    • “ plotis ypatybė naudojama konteinerio pločio dydžiui nustatyti.
    • “ marža “ nurodo tuščią vietą už konteinerio ribų.
    • “ kamšalas “ apibrėžia erdvę elemento ribos viduje.
    • “ fone “ nustato fono spalvą elemento galinėje pusėje.
    • “ teksto lygiavimas ypatybė yra naudojama nustatant teksto lygiavimą kaip „ centras “.
    • “ spalva “ nurodo teksto spalvą ribos viduje.

Galima pastebėti, kad sukurtame div viduje išlygiuotą tekstą sėkmingai sucentravome horizontaliai:

Kaip centruoti tekstą vertikaliai div viduje?

Norėdami centruoti tekstą vertikaliai „div“ konteineryje, vadovaukitės pateiktomis instrukcijomis.

1 veiksmas: pasiekite div konteinerį

Pirmiausia pasiekite sukurtą div konteinerį.

2 veiksmas: taikykite CSS ypatybes, kad centrinis tekstas būtų vertikaliai

Tada pritaikykite toliau nurodytas CSS ypatybes, kad centruotų tekstą vertikaliai div:

#align-content{
ekranas: lentelės langelis;
plotis: 300 pikselių;
aukštis: 150 pikselių;
pamušalas: 10px;
spalva: mėlyna;
fono spalva: rgb ( 248 , 215 , 166 ) ;
kraštinė: 3 pikseliai brūkšniu #f09d03;
vertikalus lygiavimas: vidurys;
}


Pagal aukščiau pateiktą kodo fragmentą:

    • Nustatyti ' ekranas “, kuris nurodo elemento rodymo elgseną kaip „ stalo langelis “, o tai reiškia, kad jis veikia kaip elemento div lentelės langelis.
    • “ plotis “ ypatybė nurodo elemento pločio dydį.
    • “ aukščio “ nustato elemento aukštį.
    • “ kamšalas “ apibrėžia tuščią vietą elemento viduje.
    • “ spalva “ naudojamas elemento viduje esančio teksto spalvai nustatyti.
    • “ fono spalva “ nurodo elemento galinės pusės spalvą.
    • “ siena ypatybė apibrėžia elemento ribą.
    • “ vertikaliai išlyginti ypatybė yra naudojama nustatant vertikalią apibrėžto elemento išlygiavimą „ vidurio “.

Išvestis


Sužinojote apie visą teksto centravimo konteineryje procedūrą tiek vertikaliai, tiek horizontaliai.

Išvada

Norėdami centruoti tekstą vertikaliai ir horizontaliai div viduje, pirmiausia sukurkite div konteinerį naudodami elementą

ir pasiekite jį naudodami parinkiklį. Tada pritaikykite CSS ypatybes, kuriose „ teksto lygiavimas ypatybė naudojama horizontaliam lygiavimui, o vertikaliai išlyginti “ nustato vertikalų išlygiavimą. Šis įrašas parodė, kaip centruoti tekstą vertikaliai ir horizontaliai div viduje.

Kita

Kategorija

Populiarios Temos

Kas yra darbo eigos orkestravimas be serverio?

Kaip pridėti kraštinę-apačią prie lentelės eilutės?

Kaip naudoti stabilų difuzijos dažymą?

Kaip peržiūrėti nuotraukas kaip skaidrių demonstraciją sistemoje „Windows 10“?

Į ką turėčiau atsižvelgti perkant nešiojamąjį kompiuterį

Kaip naudoti querySelectorAll() metodą „JavaScript“.

Kaip įdiegti „Git“ „Pop!_OS“.

MongoDB rūšiavimo užklausos rezultatai

Kas yra C formato specifikacijos?

Kaip aptikti, ar C++ eilutė tuščia

Kaip atsisiųsti „Discord“ sistemoje „Windows 64 bit“?

Kaip išvardyti tinklo sąsajas „Fedora Linux“.

Pandos Rodyti visus stulpelius

Kaip apsaugoti Kali Linux

„Cppcheck“ komanda „Linux“.

7 „Kilo problema paleidžiant C:\Windows\System32\LogiLDA.dll“ sistemos Windows pataisymai

Įdiekite „Kali Linux“ „VMware“.

Kaip sužinoti dabartinę „ChatGPT“ būseną?

Kas rašoma C++

Undying totemas: viskas, ką reikia žinoti