Alineación en CSS

text-align

A propiedade text-align aplicase ó texto dentro dun bloque e determina a alineación do bloque. Os valores posibles son:

left – Alineación a esquerda
right – Alineación a dereita
justifiy – Alineación completa pola esquerda e dereita
center – Alineación o centro

Exemplo de regras de estilo:

.centrado { text-align: center;}
.dereita {text-align : right;}
.xustificado {text-align:justify;}

Exemplo de código:

<div class="centrado">Primeira liña do texto centrado<br>Segunda liña centrada</div>
<div class="dereita">Primeria liña do texto alineado a dereita<br>Segunda liña aliñada á dereita</div>
<div class="xustificado">Primeria liña do texto xustificada. O texto ten que ser o suficientemente largo como para ocupar máis de dúas liñas e así poder ver si efectivamente o texto está xustificado, é dicir, alineado completamente pola dereita e pola esquerda. Se o texto afectado por unha alineación xustificada ten tamén establecido distintos espaciados entre liñas ou entre palabras, estos espaciados poden verse alterados</div>

Visualización:

Primeira liña do texto centrado
Segunda liña centrada

Primeria liña do texto alineado a dereita
Segunda liña aliñada á dereita

Primeria liña do texto xustificada. O texto ten que ser o suficientemente largo como para ocupar máis de dúas liñas e así poder ver si efectivamente o texto está xustificado, é dicir, alineado completamente pola dereita e pola esquerda. Se o texto afectado por unha alineación xustificada ten tamén establecido distintos espaciados entre liñas ou entre palabras, estos espaciados poden verse alterados

text-indent

A propiedade text-ident usase para tabular ou indentar a primeira liña dentro dun bloque. Os valores admitidos son unidades de lonxitude ou porcentaxe.

Exemplo de regras de estilo:

.caradentro {text-indent: 40px;}
.carafora {text-indent: -40px;}

Exemplo de código:

<p class="caradentro">Este parágrafo ten aplicada a clase caradentro, por tanto, terá unha indentación de 40 puntos na primeira liña do parágrafo, é dicir, verase como unha sangría típica de parágrafo.</p>
<p class="carafora">Estoutro parágrafo ten aplicada a clase carafora, por tanto, terá unha indentación de -40 puntos na primeira liña do paragrafo, é dicir, verase como unha sangría colgante. Observe que o principio deste parágrafo pérdese pola marxe esquerda. Para poder velo sería necesario aumentar a marxe esquerda.</p>

Visualización:

Este parágrafo ten aplicada a clase caradentro, por tanto, terá unha indentación de 40 puntos na primeira liña do parágrafo, é dicir, verase como unha sangría típica de parágrafo.

Estoutro parágrafo ten aplicada a clase carafora, por tanto, terá unha indentación de -40 puntos na primeira liña do paragrafo, é dicir, verase como unha sangría colgante. Observe que o principio deste parágrafo pérdese pola marxe esquerda. Para poder velo sería necesario aumentar a marxe esquerda.

line-height

A propiedade line-height indica a distancia vertical entre dúas liñas. Esta distancia pode indicarse con unidades de lonxitude, porcentaxe ou ben mediante un número (co cal indicamos que é alto da liña será o valor de font-size multiplicado polo número)

Exemplo de regras de estilo:

#texemploLineHeight{ line-height: 2;}

Exemplo de código:

<p id="exemploLineHeight">Texto cun alto de liña de 50 puntos o estar identificado como exemploLineHeight. Neste texto apreciase como a separación entre liñas é dobre</p>

Visualización:

Texto cun alto de liña de 50 puntos o estar identificado como exemploLineHeight. Neste texto apreciase como a separación entre liñas é dobre

vertical-align

Esta propiedade permite controlar a disposición vertical do texto ou imaxes en relación o seu elemento pai. Os posibles valores son:

top – Alínea a parte superior do elemento co que este máis arriba na liña.
botton – Alínea a parte inferior do elemento co que este máis abaixo na liña.
middle - Alínea o punto medio do elemento co punto medio do pai.
text-top – Alínea a parte superior do elemento coa parte superior do pai.
text-bottom - Alínea a parte inferior do elemento coa parte inferior do pai.
baseline – Alineación seguindo a liña base (predeterminado).
sub – Coloca o texto como subíndice.
super – Coloca o texto como superíndice.

Para poder observar o efecto dos valores da propiedade vertical-align os elementos teñen que estar en liña.

Exemplo de regras de estilo:

.alineacionTop {
font-size:12px;
vertical-align: top;}
.alineacionTextTop {
font-size:12px;
vertical-align: text-top;
}
.alineacionMiddle {
font-size:12px;
vertical-align: middle;
}
.alineacionBottom {
font-size:12px;
vertical-align: bottom;
}
.alineacionTextBottom {
font-size:12px;
vertical-align: text-bottom;
}
.subindice {
font-size:12px;
vertical-align: sub;
}
.superindice {
font-size:12px;
vertical-align: super;
}
.grande {font-size:200px;}
.mediana{font-size:50px;}

Exemplo de código:

<p class="mediana">X
<span class="alineacionTextTop">Text-Top</span>            
<span class="alineacionTextBottom">Text-Bottom</span>       
<span class="alineacionMiddle">Middle</span>                
<span class="grande">H</span>
<span class="alineacionTop">Top</span>                     
<span class="alineacionBottom">Bottom</span>                
</p>
<p>
Texto
<span class="subindice">Sub</span>
<span class="superindice">Super</span>
</p>

Visualización:

X Text-Top Text-Bottom Middle H Top Bottom

TextoSub Super

Seguinte