.

Atributul de aliniere este destul de versatil și poate fi aplicat nu numai textului corpului, 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 de enumerare

Împărțim deșertul într-un număr de secțiuni elementare, a căror dimensiune coincide cu dimensiunile totale ale leului, dar este mai mică decât dimensiunea cuștii. În continuare, prin simplă enumerare, 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 este niciunul. Luăm jumătatea în care se află leul și o împărțim din nou în jumătate. Așa că repetăm ​​până când leul este prins.

Rezultatul exemplului este prezentat în Fig. unu.

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

În acest exemplu, titlul este aliniat la centrul ferestrei browser, paragraful selectat este aliniat la dreapta și corpul textului este aliniat la stânga.

În acest articol, vom analiza cum să aliniați o imagine la dreapta și la stânga folosind css pe site.

cum să aliniați la dreapta imaginea în css

Proprietatea „float:right” este folosită pentru a alinia la dreapta imaginea. Proprietatea float schimbă afișarea unei imagini (sau a altui element) într-un bloc, dar cu unele particularități: devine invizibil pentru alte elemente bloc, dar în același timp păstrează vizibilitatea pentru elementele inline (display: inline) care se înfășoară în jurul aceasta.

Această caracteristică vă permite să aliniați imaginea la dreapta și la stânga în css, precum și alte elemente la margine fără a utiliza tabele și mult cod suplimentar. Informații detaliate despre cum funcționează această proprietate pot fi găsite în motoarele de căutare pentru „float css”.

Când imaginea s-a deplasat, textul și alte elemente încep să se înfășoare în jurul ei strâns și în multe cazuri arată urât, așa că adaugă margini folosind proprietatea „margin y1 x1 y2 x2”. Valorile „y1 x1 y2 x2” sunt umplutura de sus, dreapta, jos și respectiv stânga.

Afișare incorectă a elementelor plutitoare

După cum sa menționat mai sus, elementele float nu sunt luate în considerare deoarece sunt invizibile pentru a bloca etichetele, astfel încât este posibilă afișarea incorectă:

1 caz: elementul flotant se extinde dincolo de limitele stratului părinte.

2 caz: Titlul și alt conținut dintr-un element de bloc nu sunt afișate pe o linie nouă, dar încep să se încadreze în jurul părintelui cu tipul float .

Cum să remediați afișarea incorectă a elementelor plutitoare

Pentru a rezolva problema descrisă mai sus, trebuie să specificați limitele finalizării elementului plutitor. Deoarece elementele plutitoare sunt invizibile pentru a bloca elemente, trebuie să utilizați o etichetă suplimentară care să nu le înfășoare.

În css există o proprietate clară responsabilă pentru prevenirea înfășurării elementelor flotante. Proprietatea clear mută elementul imediat sub float, setând astfel marginea de jos și, dacă este necesar, extinzând blocul părinte până la sfârșitul tuturor etichetelor float.

Puteți utiliza orice etichetă de bloc ca extensie de chenar cu clear.

Proprietatea clear poate lua următoarele valori:

• nici unul- activarea fluxului;
• stânga- interzicerea curgerii pe partea stângă;
• dreapta- interzicerea curgerii pe partea dreapta;
• ambii- interzicerea curgerii pe ambele părți.

Cea mai comună etichetă folosită pentru a extinde o chenar până la capătul unui bloc plutitor este
, puteți folosi și

fără conținut intern.

aliniați la stânga imaginea în css

Puteți alinia o imagine la marginea stângă în css, la fel ca la dreapta, doar în loc de float: right , float: left este scris și în loc de indent de la marginea stângă, indent de la dreapta este setată folosind proprietatea margine .

Exemple

Un exemplu de cod html pentru alinierea la dreapta a unei imagini în css (clear nu este necesar)

Rezultat în browser

Codul paginii (nu este necesară proprietatea clear)

În exemplul de mai sus, imaginea este apăsată spre marginea dreaptă și are o margine din stânga de 15 px.

Exemplu de cod html cum să aliniați la dreapta o imagine în css (este nevoie de clar pentru a extinde chenarul)

Rezultat în browser

În exemplul de mai sus, proprietatea „border:4px solid #cccccc;” înseamnă a face chenarul 4px gros și culoare #cccccc și padding:10px este umplutura etichetei div cu 10px.

Un exemplu de cod html cum să aliniați o imagine la stânga în css (este nevoie de clar pentru a extinde chenarul)

Rezultat în browser

Codul paginii (cu proprietate clară)

Păsări

Peşte

Puteți plasa text aici...

În exemplul de mai sus, imaginea este apăsată spre stânga și are o umplutură de 15 px în partea de sus și în dreapta.

Până cândva, eu, ca mulți dintre voi, am folosit două metode:

1. Prima modalitate se bazează pe proprietatea float. Blocul din stânga este setat să plutească: stânga, blocul din dreapta este setat să plutească: dreapta
2. A doua modalitate este de a poziționa blocul din dreapta în mod absolut, cu parametrii dreapta: 0 sau stânga: 100%, margine-stânga: -(lățimea blocului)

Principalul dezavantaj al ambelor metode este că, dacă blocurile trebuie aliniate de-a lungul marginii de jos sau de-a lungul liniei de mijloc unul față de celălalt, atunci blocurile trebuie să fie deplasate vertical prin metoda de selecție, setându-le fie în partea de sus: oriceValoare sau margine. -top: oriceValoare. Și prima metodă, plus totul, mai are unul, nu atât un dezavantaj, ci un fleac neplăcut. Aceasta este necesitatea de a curăța fluxul cu clearFix „a, overflow sau un div suplimentar.
Deci metoda numărul 3. În primul rând, codul:

HTML adecvat

copie sursa | Copiați HTML

1. < div class ="wrap">
2. < div class ="left">< a href ="#">Blocul din stânga< div class ="right">< a href ="#">blocul din dreapta

CSS corect

copie sursa | Copiați HTML

1. .wrap(
2. latime: 500px
3. fundal: #555;
4. inaltime: 500px;
5. .stanga dreapta (
6. display: inline -block;
7. //afisare: inline;
8. // zoom: 1;
9. latime: 100%
10. marja-dreapta : -100% ;
11. vertical-align : fund ;
12. .dreapta(
13. text-align: dreapta;
14. .stânga a , .dreapta a ( afișare : bloc inline ; poziție : relativă ; )
15. .stânga a ( lățime : 200 px ; înălțime : 100 px ; fundal : verde ; )
16. .dreapta a ( latime : 100 px ; inaltime : 200 px ; fundal : roz ; )

Explicații

Esența metodei este să suprapuneți blocurile unul peste altul folosind margin-right: -100% și să aliniați conținutul blocului din dreapta la dreapta folosind text-align: right.
Este recomandabil să scrieți ambele blocuri (dreapta și stânga) pe o singură linie, în caz contrar, din cauza caracterului de întrerupere de linie, blocul din dreapta se va târâ ușor în afara granițelor blocului părinte.
Legăturile trebuie setate pe poziție: relativă, în caz contrar, din cauza blocurilor suprapuse, unele pot fi de neclick.

Avantajele metodei

Principalul plus este că vertical-align începe acum să funcționeze pentru blocurile noastre. Și le putem alinia cu ușurință atât pe marginea de sus, cât și în partea de jos și în centru.

Contra metodei

Iar principalul dezavantaj este că, folosind această metodă, trebuie să fim ferm convinși că conținutul blocurilor nu va crește atât de mult încât să înceapă să se suprapună unul pe celălalt (apropo, metoda cu flotoare este lipsită de acest dezavantaj , deoarece la creșterea conținutului blocurilor, acestea vor sta unul sub celălalt).

P.S.

Nu am văzut o astfel de metodă pe Internet, așadar, vă rog: dacă cineva găsește un articol similar publicat mai devreme, vă rog să-mi spuneți.

Actualizare.

În comentarii, mi-a fost atrasă atenția asupra metodei folosind text-align: justify. Această metodă este, de asemenea, bună, dar are două dezavantaje. În primul rând, necesită un element suplimentar pentru a emula ultima linie a unui bloc de text și, în al doilea rând, nu va funcționa în IE6-IE7 pentru elementele la nivel de bloc.