Alinierea textului si imaginilor cu CSS (Cascading Style Sheets)

[kenzake powah!]

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 de 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.