Align text vertically

This is a trick that I taught my coworker Toni Bullon. If any time you need align text vertically on middle, you can combine the css attributes; display:table, display:table-cell and vertical-align:middle for get this effect.

Example of align text verticallyFor make it, only need put on principal block the style display with the value table and, on son block that have the text, the style display with the value table-cell and the style vertical-align with the value middle. With this, you have the same effect that you have with a table with the attribute valign=middle. This effect is good for align dynamic text and you can not use tables for make it.

I leave an example for better understanding:

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="en">
	<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 aligned vertically.
			</section>
		</article>
	</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *