Warning: Cannot modify header information - headers already sent by (output started at /home/intheory/public_html/ro/alinierea_textului_si_imaginilor_cu_css.php:2) in /home/intheory/public_html/counter.inc on line 31
 Alinierea textului si imaginilor cu CSS
in-theory.info

Alinierea textului si imaginilor cu CSS

Etichete: CSS, HTML

Alinierea textului sau imaginilor în paginile HTML se poate face într-un mod foarte riguros, dar mai puțin recomandabil, cu tabele. Modul recomandabil de lucru este utilizarea CSS, a proprietăților descrise mai jos.




1. Cu proprietatea text-align

Prima variantă posibilă este utilizarea proprietăţii text-align. Cu aceast? proprietate se decide alinierea textului în interiorul unei alte entități.
Valorile posibile sunt: left, right, center, justify.

De exemplu, următorul cod:

<div style="border: gray solid 1px; text-align: right;">

produce următorul efect:

aaa


2. Cu proprietatea padding

În traducere liberă, padding inseamnă "umplutură". Cu asta se şi ocupă proprietatea padding: încarcă spaţiul indicat cu "umplutură".

De exemplu,
<div style="padding-left: 50px">aaa</div>

creează următorul efect (mută textul "aaa" cu 50 de pixeli la dreapta. Clar?):
aaa


Pentru a fi şi mai clar, iată un exemplu cu un tabel:

<table border="1">
  <tr>
    <td style="padding-right: 50px">
      aaa
    </td>
  </tr>
</table>


Rezultatul este că un spaţiu de 50 de pixeli, în dreapta, este plin cu "umplutură":

aaa


Pot fi specificate următoarele "umpluturi":
- padding-top
- padding-right
- padding-bottom
- padding-left,
folosind o lungime (în pixeli, în centimetri) sau un procent.



3. Cu proprietatea margin

Ca şi la padding se pot specifica următoarele margini:
- margin-top
- margin-right
- margin-bottom
- margin-left. În exemplul următor vom avea un paragraf cu margine şi unul fără margine:

<p>fara margine</p><br>
<p style="margin-left: 3cm">cu margine</p>


Rezultatul este următorul:

fara margine

cu margine





4. Cu proprietatea float

În CSS, imaginile sau blocurile de text care apar în interiorul altor elemente se numesc elemente "floating".

Proprietatea float specific? în ce parte va fi afi?at un element în interiorul altui element.
În următorul exemplu vom alinia un bloc format din 9 litere "a" în dreapta unui text lung. În acelaşi mod pot fi aliniate şi imaginile.

<p>
<div style="float:right">aaa<br>aaa<br>aaa<br><br></div>
Acesta este text de umplutura, foarte mult text de umplutura.
Acesta este text de umplutura, foarte mult text de umplutura.
Acesta este text de umplutura, foarte mult text de umplutura.
Acesta este text de umplutura, foarte mult text de umplutura.
</p>

Rezultatul este urm?torul:

aaa
aaa
aaa

Acesta este text de umplutura, foarte mult text de umplutura. Acesta este text de umplutura, foarte mult text de umplutura. Acesta este text de umplutura, foarte mult text de umplutura. Acesta este text de umplutura, foarte mult text de umplutura.





Tot în scopul alinierii sau aşezării textului (sau imaginilor) în diverse poziţii, se mai pot folosi şi alte proprietăţi precum clear, sau position. Pentru mai multe detalii recomand http://www.w3schools.com/css/default.asp.

Adrian Ionescu





Colecția:  𐒢 Exemple de cod

Articolul următor:  Exemplu de utilizare PHP cu mySQL: formular pentru introducere date



👍 Topul celor mai citite articole

1. Analiza cerinţelor software. Introducere
Această serie de articole este destinată tuturor persoanelor implicate în proiecte de dezvoltare de software: şefi de departament, şefi de proiec...

2. Despre Analiza cerinţelor
Analiza cerinţelor software (pe care o vom numi în continuare Analiza de business sau Analiză software) este aceea dintre disciplinele existente î...

3. Axiomele dezvoltării software
Adevăruri ale dezvoltării software care susțin nevoia Analizei cerințelor. Unul dintre ele este: "Întotdeauna, într-un proiect software apar si...

4. Ciclul de dezvoltare al produsului software (SDLC)
Deşi în limba engleză este denumit Software Development Life Cycle (SDLC) am ales traducerea „Ciclul de dezvoltare al produsului software”, chi...

5. Ciclul de dezvoltare iterativ
Asumarea realităţii că întotdeauna, în decursul proiectului, cerinţele se vor schimba a condus la apariţia unui model de dezvoltare realist, ca...

6. Locul Analizei în proiectul de dezvoltare software
Analiza Software este o disciplină care se află în relaţie de dependenţă cu celelalte discipline din proiect. Concret, task-urile din proiectul ...

7. Modele teoretice de abordare a problemelor. Decompoziţia
Modalităţile teoretice de abordare a problemelor sunt universale şi pot fi folosite oriunde însă pentru domeniul nostru, este important să le co...

8. Modele teoretice de abordare a problemelor. Sinteza
Sinteza este o modalitate, prin care, din manifestări punctuale se determină problema reală. Cel mai simplu şi clar exemplu este acela al mediculu...

9. Modele teoretice de abordare a problemelor. Crearea unui trunchi de bază
De foarte multe ori, în viaţa reală, o problemă nu poate fi punctată decât cu un efort substanţial sau chiar deloc. Pur şi simplu, obţinerea ...

10. Modele teoretice de abordare a problemelor. Abordarea iterativă
Metoda iterativă presupune rezolvarea unei probleme cunoscute printr-o abordare iterativă, la fiecare iteraţie făcând un pas către rezolvarea pr...



📜 Căutare după etichetă:

Analiza Business
Baze de date
C#
Cerințe software
CSS
Dictionar IT
HTML
MySQL
PHP
Riscuri
SDLC
Specificații software
SQL
UML