Quick Reach
CSS vertical align property
The vertical align property is used to align elements vertically. Note that when applied it will align only in-line elements or inline-block elements. Also as mentioned, it will align element only and not its content. For example div is a block element. If you try vertical align in Div, it won’t work. However if vertical-align is assigned to input item (which is inline element) or span etc inside Div, it will work.
In case of table cells, however the case is different. The vertical-align property will affect content of table cell not the cell itself.
Syntax of vertical align
vertical-align: value;
Where value can be either of following:
- baseline: which is default. This aligns specified element to the baseline of parent element. E.g. span inside div.
- text-top: aligns top of child element to parents top of text.
- text-bottom: aligns bottom of child element to parents bottom of text.
- top: This aligns child element top to the tallest element inline
- bottom:
- middle:
- super: Aligns as super script.
- sub: Aligns as sub script.
Using vertical align property with Div text and input type
In this example a div (parent) is created with line height. A child element input type is assigned vertical align property.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<style>
/*Using CSS text*/
div
{
background-color: #F0F0F0;
color: rgb(000,125,255);
line-height: 5;
font-size:15pt;
}
input
{
vertical-align: text-top;
}
</style>
</head>
<body>
<div>Parent Div with line-height=5.
<input name=“vertical_test”/>
</div>
</body>
</html>
|
CSS text vertical align in Div
This example will apply vertical align to span element, child of Div, as super value.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<html>
<head>
<style>
/*Using CSS text*/
div
{
background-color: #F0F0F0;
color: rgb(000,125,255);
font-size:16pt;
line-height: 5;
}
span
{
background-color: #F0ddF0;
color: rgb(000,125,255);
vertical-align:super;
}
</style>
</head>
<body>
<div>Parent Div with line-height=5.
<span> Span element with vertical-align</span>
</div>
</body>
</html>
|
Also see CSS text color
Leave A Comment?