Hariom Prajapati
31 Aug 2022
CSSIt is used to align element vertically.
Syntax -
vertical-align:value;
values
|
baseline |
It is use to set element at baseline of parent element. |
| text-top | It is use to set font at baseline of parent element |
| text-bottom |
It is use to set font at bottom of parent element. |
| sub |
It is use to set element at subscript baseline of the parent element |
| super |
It is use to set element at superscript baseline of the parent element |
| middle |
It is use to set element at middle of the parent element |
| bottom | It is use to set element at bottom of the parent element |
| % | Raises or lower an element by a percent of the "line-height" property. Negative values are allowed |
| top | It is use to set element at top of the parent element |
| length | Raises or lower an element by the specified length. Negative values are allowed. |
For example -
<!DOCTYPE html>
<html>
<title>CSS Vertical Alignment Property</title>
<head>
<style>
body {
background-color: #eaebec;
}
#teknowizeDiv1 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv1 span {
background: lightblue;
vertical-align: baseline;
}
#teknowizeDiv2 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv2 span {
background: lightblue;
vertical-align: 25px;
}
#teknowizeDiv3 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv3 span {
background: lightblue;
vertical-align: 50%;
}
#teknowizeDiv4 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv4 span {
background: lightblue;
vertical-align: sub;
}
#teknowizeDiv5 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv5 span {
background: lightblue;
vertical-align: super;
}
#teknowizeDiv6 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv6 span {
background: lightblue;
vertical-align: top;
}
#teknowizeDiv7 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv7 span {
background: lightblue;
vertical-align: text-top;
}
#teknowizeDiv8 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv8 span {
background: lightblue;
vertical-align: middle;
}
#teknowizeDiv9 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv9 span {
background: lightblue;
vertical-align: bottom;
}
#teknowizeDiv10 {
height: 50px;
background-color: #FFFFFF;
border-bottom: 1px solid #000000;
margin:0.5rem 0;
}
#teknowizeDiv10 span {
background: lightblue;
vertical-align: text-bottom;
}
</style>
</head>
<body>
<h1>Vertical Alignment Property</h1>
<div id="teknowizeDiv1">
Hello friends, welcome to <span>teknowize</span> online learning platform. - baseline
</div>
<div id="teknowizeDiv2">
Hello friends, welcome to <span>teknowize</span> online learning platform. - Length
</div>
<div id="teknowizeDiv3">
Hello friends, welcome to <span>teknowize</span> online learning platform. - Percent
</div>
<div id="teknowizeDiv4">
Hello friends, welcome to <span>teknowize</span> online learning platform. - sub
</div>
<div id="teknowizeDiv5">
Hello friends, welcome to <span>teknowize</span> online learning platform. - sup
</div>
<div id="teknowizeDiv6">
Hello friends, welcome to <span>teknowize</span> online learning platform. - top
</div>
<div id="teknowizeDiv7">
Hello friends, welcome to <span>teknowize</span> online learning platform. - text-top
</div>
<div id="teknowizeDiv8">
Hello friends, welcome to <span>teknowize</span> online learning platform. - middle
</div>
<div id="teknowizeDiv9">
Hello friends, welcome to <span>teknowize</span> online learning platform. - bottom
</div>
<div id="teknowizeDiv10">
Hello friends, welcome to <span>teknowize</span> online learning platform. - text-bottom
</div>
</body>
</html>
Output
