Alinear text verticalment

Aquest es un truc que em va ensenyar el meu company de feina Toni Bullón. Si alguna vegada necessiteu alinear un text verticalment, podeu combinar els atributs de css; display:table, display:table-cell i vertical-align:middle per aconseguir aquest efecte.

Exemple d'alineació vertical d'un textPer poder fer aixo, nomes necessiteu posar en el bloc principal l’atribut display amb el valor table i al bloc fill que te el text, els atributs display amb el valor table-cell i vertical-align amb el valor middle. Amb aixo aconseguireu un efecte idèntic al de tindre una taula amb el atribut valign=middle. Aquest efecte va mol be per a quan es te que alinear un text dinàmic verticalment però no podeu/voleu utilitzar taules per fer-ho.

Us deixo un exemple per millor compressió:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="ca">
	<head>
		<style type="text/css"> 
			article{
				display:table;
			}
			section{
				display:table-cell;
				vertical-align:middle;
				height:100px;
				border:1px solid #000;
			}
		</style>
	</head>
	<body>
		<article>
			<section>
				Text centrat verticalment.
			</section>
		</article>
	</body>
</html>

Deixa un comentari

L'adreça electrònica no es publicarà Els camps necessaris estan marcats amb *