Kuidas tsentreerida teksti (horisontaalselt ja vertikaalselt) lahtrisse div

Kuidas Tsentreerida Teksti Horisontaalselt Ja Vertikaalselt Lahtrisse Div



Veebilehtede kujundamisel saavad arendajad lisada erinevaid komponente, sealhulgas pilte, teksti, tabeleid ja muud. Lisaks saab teksti mitme CSS-i atribuutide abil div-osas keskele joondada. Kõige populaarsem viis teksti horisontaalseks tsentreerimiseks on kasutada ' teksti joondamine ” atribuut. Lisaks saate kasutada ka ' reakõrgus ” ja „ vertikaalne joondamine ” atribuudid teksti vertikaalseks joondamiseks.

See postitus kirjeldab teksti tsentreerimiseks nii vertikaalselt kui ka horisontaalselt jaotuses:





Kuidas tsentreerida teksti horisontaalselt div-i sees?

Teksti tsentreerimiseks horisontaalselt lahtrisse div, vaadake antud protseduuri.



1. samm: looge div-konteiner



Esialgu looge div-konteiner, kasutades '

” element. Seejärel sisestage ' id ” atribuut div avatava sildi sees. Pärast seda manustage tekst div-märgendi vahele:



< div id = 'sisu joondamine' >
Linuxhint on üks parimaid veebisaite jaoks sisu loomine.
div >


Väljund


2. toiming. Juurdepääs div-konteinerile teksti keskele joondamiseks



Nüüd avage div-konteiner, kasutades ' id ' atribuudi nimi valijaga ' # ” ja rakendage järgmisi CSS-i atribuute:

#align-content{
laius: 80 % ;
marginaal: 0 auto;
polster: 20px;
taust: #c8edf3;
teksti joondamine: keskel;
värv: rgb ( 49 , viisteist , 240 ) ;
}


Siin:

    • “ laius ” atribuuti kasutatakse konteineri laiuse suuruse määramiseks.
    • “ marginaal ” määrab tühja ruumi väljaspool konteinerit.
    • “ polsterdus ” määratleb ruumi elemendi piiri sees.
    • “ taustal ” määrab elemendi tagakülje taustavärvi.
    • “ teksti joondamine atribuuti kasutatakse teksti joonduse määramiseks kui ' Keskus ”.
    • “ värvi ” määrab piiri sees oleva teksti värvi.

Võib täheldada, et oleme joondatud teksti edukalt tsentreerinud loodud div sees horisontaalselt:

Kuidas tsentreerida teksti vertikaalselt div sees?

Teksti vertikaalseks tsentreerimiseks div-konteinerisse järgige antud juhiseid.

1. toiming: avage div-konteiner

Kõigepealt avage loodud div-konteiner.

2. toiming. Rakendage CSS-i atribuute teksti keskele vertikaalselt

Seejärel rakendage allolevaid CSS-i atribuute, et tsentreerida tekst vertikaalselt lahtris div:

#align-content{
ekraan: tabel-lahter;
laius: 300 pikslit;
kõrgus: 150 pikslit;
polsterdus: 10px;
värv: sinine;
taustavärv: rgb ( 248 , 215 , 166 ) ;
ääris: 3 pikslit katkendlik #f09d03;
vertikaalne joondus: keskmine;
}


Ülaltoodud koodilõigu järgi:

    • Määra ' kuva ', mis määrab elemendi kuvamiskäitumise kui ' tabel-lahter ”, mis tähendab, et see toimib nagu tabeli lahter elemendis div.
    • “ laius ” atribuut määrab elemendi laiuse suuruse.
    • “ kõrgus ” määrab elemendi kõrguse.
    • “ polsterdus ” määratleb tühja ruumi elemendi sees.
    • “ värvi ” kasutatakse elemendi sees oleva teksti värvi määramiseks.
    • “ taustavärv ” määrab elemendi tagakülje värvi.
    • “ piir ” atribuut määrab elemendi piiri.
    • “ vertikaalne joondamine atribuuti kasutatakse määratletud elemendi vertikaalse joonduse määramiseks ' keskel ”.

Väljund


Olete õppinud tundma kogu protseduuri, mille abil saab teksti konteinerisse tsentreerida nii vertikaalselt kui ka horisontaalselt.

Järeldus

Teksti tsentreerimiseks vertikaalselt ja horisontaalselt div-i sees looge esmalt elemendi

abil div konteiner ja avage see valija abil. Seejärel rakendage CSS-i atribuute, milles ' teksti joondamine ' atribuuti kasutatakse horisontaalseks joondamiseks ja ' vertikaalne joondamine ” määrab vertikaalse joonduse. See postitus demonstreeris meetodeid teksti vertikaalseks ja horisontaalseks tsentreerimiseks div sees.

muud

Kategooria

Lemmik Postitused

Funktsiooni Uniqid() kasutamine PHP-s

Linux Expect Command

Jada lähtestamine PostgreSQL-is

Parsige komadega string JavaScriptis arvuks

Kuidas jäädvustada ja analüüsida pakette näite abil Tcpdumpiga

Mis vahe on avalikul, privaatsel ja kaitstud PHP-s?

Kuidas parandada viga 'Kasutaja ei ole Sudoersi failis'?

Mis vahe on int ja int& vahel C++ keeles?

Kuidas kujundada reageerivaid edenemisribasid HTML-i, CSS-i ja JavaScripti abil

Mida Document BaseURI atribuut JavaScriptis teeb?

Võrguotsing MLflow abil

Linuxi cifs Mount

Discordis Soundboardi helide haldamine

Windows Vista ja Windows 7 lemmikute lingi lisamisel täpsustamata viga - Winhelponline

Kuidas leida faili suurust C-programmeerimises

Kuidas Streamlitis andmeid tuua

JavaScript ei ole võrdne Võrdlusoperaator | Selgitatud

Kuidas kasutada määramisoperaatorit C-s

Mis on Amazon Elastic Beanstalk?

Kus on Elasticsearchi logifail?