.

Atributul de aliniere este destul de universal și poate fi aplicat nu numai textului principal, ci și titlurilor precum

. Exemplul 1 arată cum să setați alinierea într-un astfel de caz.

Exemplul 1: Alinierea textului

Cum să prinzi un leu?

Metoda forței brute

Împărțim deșertul într-o serie de zone elementare, a căror dimensiune coincide cu dimensiunile totale ale leului, dar este mai mică decât dimensiunea cuștii. În continuare, prin simpla căutare determinăm zona în care se află leul, ceea ce duce automat la capturarea acestuia.

Metoda dihotomiei

Împărțim deșertul în două jumătăți. Într-o parte este un leu, în cealaltă nu există niciunul. Luăm jumătatea în care se află leul și o împărțim din nou în jumătate. Repetăm ​​acest lucru până când leul este prins.

Rezultatul exemplului este prezentat în Fig. 1.

Orez. 1. Aliniați textul la dreapta și la stânga

ÎN în acest exemplu Titlul este aliniat la centrul ferestrei browserului, paragraful evidențiat este aliniat la dreapta, iar corpul textului este aliniat la stânga.

Pentru a selecta elementele de intrare dorite cu tipul „căsuță de selectare”, puteți utiliza selectorul ':Caseta de bifat'. Exemplu:

Unde manipulator— un handler care este apelat atunci când are loc evenimentul de modificare

Lucrul cu obiectul Callbacks în jQuery: Utilizarea unei liste de funcții Callback

Obiectul Callbacks din jQuery vă permite să creați ceva ca o listă de callback-uri care vor fi executate atunci când este apelată metoda utilitarului fire(). Mai mult, atunci când apelați metoda fire(), este posibil să treceți un argument care va fi folosit de fiecare funcție de apel invers. Acum ne vom uita la modul în care funcționează acest lucru folosind mai multe exemple.

Prinderea pierderii concentrării. metoda blur() în jQuery

Metoda blur() din jQuery vă permite să atribuiți un handler unui anumit element de pe pagină care va fi apelat de îndată ce focalizarea este pierdută din a acestui element. Inițial, acest eveniment se referea în primul rând la elementele de formular - etichete de intrare, totuși ultimele versiuni browserele sunt capabile să gestioneze acest eveniment pentru aproape toate tipurile de elemente DOM.

Inserează conținut înaintea conținutului obiectului selectat. metoda before() din jQuery

Metoda before() din jQuery vă permite să inserați un anumit conținut sau obiecte înainte de conținutul fiecăruia dintr-un set de obiecte specificate.
Sintaxa metodei este simplă:

1	.inainte (conținut, )

A doua varianta:

1	.inainte(functie)

jQuery. metoda attr(). Cum să obțineți sau să adăugați un atribut unui element

jQuery facilitează accesul la atributele elementului dorit, regăsindu-i valoarea sau, dimpotrivă, setarea și modificarea acestuia. Pentru astfel de manipulări se utilizează metoda attr().

Metoda .appendTo() din jQuery. Adăugarea de conținut la sfârșitul elementelor

Metoda appendTo() efectuează în esență aceeași sarcină ca și metoda append(). Diferența, în mare, este doar în sintaxă. Dacă pentru append() specificăm selectorul dorit, adăugându-i această metodă, unde între paranteze indicăm exact ce trebuie adăugat la sfârșitul conținutului obiectului specificat, atunci pentru appendTo() ceea ce trebuie adăugat este nu mai este între paranteze ca parametru de metodă și imediat înaintea metodei în sine ca obiectul pe care este apelat appendTo(). Diferența va fi mai bine înțeleasă cu următorul exemplu.

jQuery .animate() Metoda: animați imagini, text și orice

Metoda .animate() vă permite să creați efecte de animație folosind proprietățile CSS ale obiectelor în sine. Metoda are două variante cu un număr diferit de parametri trecuți

Conversia videoclipurilor folosind Movavi

În ultimul timp, pentru a profita mai bine de timpul petrecut călătorind la și de la serviciu, am încercat să descarc mai multe pe telefon în avans. videoclipuri utile role. Telefonul este pe Android și, cel mai recent, am întâmpinat o problemă când smartphone-ul din anumite motive a refuzat să redea videoclipuri în format AVI. Nu știu dacă playerul este slab sau specificul sistemului de operare. Cu toate acestea, nu a durat mult pentru a rezolva problema: am găsit un convertor video destul de funcțional pe Internet, care nu numai că îl poate converti dintr-un format în altul, ci și poate pregăti un fișier ținând cont de caracteristicile dispozitivului dvs. Aici o scurtă descriere a Cum să folosești acest program minunat.

Alinierea elementelor pe orizontală și pe verticală se poate face în diferite moduri. Alegerea metodei depinde de tipul elementului (bloc sau inline), tipul poziționării acestuia, dimensiunea etc.

1. Alinierea orizontală la centrul blocului/paginii

1.1. Dacă este specificată lățimea blocului:

div ( lățime: 300 px; margine: 0 automat; /*centrează elementul orizontal în blocul părinte*/ )

Dacă doriți să aliniați un element inline în acest fel, acesta trebuie să fie setat să afișeze: bloc;

1.2. Dacă un bloc este imbricat într-un alt bloc și lățimea acestuia nu este specificată/specificată:

.wrapper(text-align: center;)

1.3. Dacă blocul are o lățime și trebuie să fie centrat pe blocul părinte:

.wrapper (poziție: relativă; /*setează poziționarea relativă pentru blocul părinte, astfel încât apoi să putem poziționa absolut blocul în interiorul acestuia*/) .box ( lățime: 400px; poziție: absolut; stânga: 50%; margin-left: -200px; / *deplasați blocul la stânga cu o distanță egală cu jumătate din lățime*/ )

1.4. Dacă blocurile nu au o lățime specificată, le puteți centra folosind un bloc de înveliș părinte:

.wrapper (text-align: center; /*plasați conținutul blocului în centru*/) .box ( afișare: inline-block; /*aranjați blocurile pe orizontală*/ margin-right: -0.25em; /* eliminați spațiul potrivit dintre blocuri*/ )

2. Alinierea verticală

2.1. Dacă textul ocupă un rând, de exemplu, pentru butoane și elemente de meniu:

.button (înălțime: 50px; înălțime linie: 50px; )

2.2. Pentru a alinia vertical un bloc într-un bloc părinte:

.wrapper (poziție: relativ;).box (înălțime: 100px; poziție: absolut; sus: 50%; margine: -50px 0 0 0; )

2.3. Alinierea verticală după tipul tabelului:

.wrapper ( afișare: tabel; lățime: 100%; ) .box ( afișare: celulă-tabel; înălțime: 100 px; aliniere text: centru; aliniere verticală: mijloc; )

2.4. Dacă un bloc are o lățime și o înălțime date și trebuie să fie centrat pe blocul său părinte:

.wrapper ( poziție: relativ; ) .box ( înălțime: 100px; lățime: 100px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; stânga: 0; margine: automat; overflow: automat; /*to) conținutul nu s-a răspândit */)

2.5. Poziționare absolută în centrul paginii/blocului folosind transformarea CSS3:

dacă sunt specificate dimensiuni pentru element

div ( width: 300px; /*setează lățimea blocului*/ height:100px; /*setează înălțimea blocului*/ transform: translate(-50%, -50%); poziție: absolut; top: 50 %; stânga: 50% ;)

dacă elementul nu are dimensiuni și nu este gol

h1 ( marja: 0; transformare: translate(-50%, -50%); poziție: absolut; sus: 50%; stânga: 50%; )

2.5. Poziţionarea absolută a blocului

centrat pe pagină

div ( lățime: 500px; înălțime: 100px; /* dacă înălțimea nu este setată explicit, aceasta va fi 100% */ poziție: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; margine: auto ;)

in centrul blocului

.wrapper ( poziție: absolut; ) .box ( lățime: 100px; înălțime: 100px; /* dacă înălțimea nu este setată în mod explicit, aceasta va fi 100% */ poziție: absolut; sus: 0; jos: 0; stânga: 0 ; dreapta: 0; margine: automat; )

Până acum, am aliniat elementele doar la stânga. Mai precis, tu și cu mine nu am făcut asta deloc, iar browserul însuși aliniază elementele la stânga în mod implicit. Desigur, ar fi prea plictisitor să aliniezi totul la stânga. Prin urmare, există diferite căi alinierea la centru și la dreapta.

Alinierea elementelor este ceva ce trebuie doar să știți când faceți acest lucru. Primul lucru pe care trebuie să-l faceți este să introduceți o pagină simplă.

A fost odată o etichetă

Nu vă sfătuiesc să îl folosiți acum, din cauza disponibilității unor metode mai moderne, dar nu pot să nu menționez asta. Este foarte, foarte simplu de utilizat. Tot ce ai nevoie pentru a fi centrat, plasezi în interiorul acestei etichete. De exemplu, aici aliniem direcția de nivel 1 la centru.

Puteți adăuga o imagine, de asemenea aliniată la centru, să trecem și la următoarea linie folosind eticheta
:

Titlu de nivel 1, aliniat la centru

A fost o etichetă

, care este deja depășit, în plus, contrar așteptărilor tale de etichete Și pur si simplu nu exista. Să spunem aliniat la stânga în mod implicit, aliniat la centru folosind eticheta , dar ce zici de cel potrivit?

Pentru a rezolva această problemă, dezvoltatorii au venit cu metoda universala alinierea elementelor HTML. Metoda este de a folosi așa-numitele containere, care sunt create folosind eticheta

. Adică, tot ceea ce trebuie plasat într-un anumit container este plasat în interiorul etichetei

. Și această etichetă are deja atributul " alinia", a cărui valoare determină poziția acestui container. Există trei valori: " stânga", "centru", "dreapta„. În mod implicit, este „ stânga„Cu toate acestea, cred că acest lucru nu te surprinde.

Să scriem același lucru acum cod HTML, dar folosind containere, în plus, să ne aliniem nu la centru, ci la dreapta.

După cum puteți vedea, totul funcționează. Vă sfătuiesc să modificați și valorile atributului " alinia" pentru a analiza alte tipuri de aliniere a conținutului containerului.

Un alt mod de a alinia elementele HTML- acestea sunt tabele, dar acest subiect merită o discuție separată, așa că vom vorbi despre el într-unul dintre articolele următoare.

Pentru moment, pagina ta ar trebui să arate astfel:

Titlu de nivel 1, aliniat la centru

Titlu de nivel 1, aliniat la dreapta

Cu stimă, Mihail Rusakov.

P.S. Dacă vrei să afli mai multe despre HTML apoi uita-te la a mea curs gratuit cu un exemplu de creare a unui site web pe HTML:

Buna ziua! Să continuăm să stăpânim elementele de bază limbaj HTML. Să vedem ce trebuie să scrieți pentru a alinia textul la centru, lățime sau margini.

Trecând la treabă, să vedem cum să centrați textul în trei căi diferite. Ultimele două sunt legate direct la foaia de stil. Poate fi un fișier CSS care se conectează la paginile site-ului și le definește aspectul.

Metoda 1 - lucru direct cu HTML

De fapt, este destul de simplu. Vezi exemplul de mai jos.

Aliniați paragraful la centru.

Dacă trebuie să mutați fragmente de text într-un mod diferit, atunci scriem în loc de parametrul „centru”. următoarele valori:

• justificare – alinierea textului la lățimea paginii;
• dreapta – pe marginea dreaptă;
• stânga - la stânga.

Prin analogie, puteți muta conținutul care se află în anteturi (h1, h2) și container (div).

Metoda 2 și 3 - folosirea stilurilor

Designul prezentat mai sus poate fi ușor transformat. Efectul va fi același. Pentru a face acest lucru, trebuie să scrieți codul de mai jos.

Bloc de text.

În această formă, codul este scris direct în HTML pentru a centra conținutul textului.

Există o altă modalitate alternativă de a obține rezultate. Va trebui să faceți câțiva pași.

Pasul 1. În codul principal scrieți

Material text.

Pasul 2. În fișierul CSS inclus, introduceți următorul cod:

Rovno (text-align:center;)

Observ că cuvântul „rovno” este doar numele unei clase care poate fi numită diferit. Acest lucru este lăsat la latitudinea programatorului.

Prin analogie, în HTML puteți face textul centrat, justificat și aliniat la marginea dreaptă sau stângă a paginii. După cum puteți vedea, există mult mai multe opțiuni pentru a vă atinge obiectivul.

Doar câteva întrebări:

• Faceți un proiect de informare non-profit?
• Vrei ca site-ul tău să se descurce bine? motoare de căutare?
• Vrei să câștigi venituri online?

Dacă toate răspunsurile sunt pozitive, atunci priviți doar o abordare integrată a dezvoltării site-ului web. Informațiile vor fi deosebit de utile dacă rulează pe CMS-ul WordPress.

Aș dori să subliniez că propriile site-uri web sunt doar una dintre multele opțiuni pentru a genera venituri pasive sau active pe internet. Blogul meu este dedicat oportunităților financiare online.

Ați lucrat vreodată în domeniul arbitrajului de trafic, copywriting și alte domenii de activitate care generează venituri primare sau suplimentare prin colaborare la distanță? Puteți afla despre asta și multe altele chiar acum pe paginile blogului meu.

Voi mai publica destul de multe pe viitor Informatii utile. Ține legătura. Dacă doriți, vă puteți abona la actualizările Workip prin e-mail. Formularul de abonare se găsește mai jos.