vertical-align
The vertical-align property is mainly used for the vertical position of text or images in each line. It is usually used for vertical position adjustment for
- Additional small text in the paragraph.
- Inline icons
- Text or images in a table cell
Additional small text position in paragraph
The default value is the baseline, which aligns small text with the text baseline. When you use super or sub, the small text will be aligned with the baseline of superscript or subscript text baseline. You can also specify the top, middle, or bottom. Those positions are defined depending on the line height. You can also use a specific size (e.g., 10px or -10px) to manually adjust the position.
The vertical-align property should be written in the small text element (not in the parent element) like in the example below.
<p> ABC
<span style="vertical-align: top"> small text </span>
<p>
Inline icon position in paragraph
The vertical-align property is useful when you want to adjust the position of icons in a paragraph. You can use the same keywords as the ones we explained for the small text vertical alignment. To set the position, you can add the vertical-align property in the <img> tag of the icon you want to adjust the position of.
<p> ABC
<img src="img/xxx" style="vertical-align: top;">
<p>
Text or image position in table cells
The vertical-align property can also be used for vertical position adjustment for the text or images in table cells. In this case, you can use one of the keywords from the top, middle, or bottom. The middle is the default in the table format.
For the table format, you can set the vertical-align property for the <td> tag like in the example below.
td{
vertical-align: top;
}
vertical-alignment vs. display
vertical-alignment is used only in special cases. It cannot be used for block elements to align their positions vertically. Usually, we use the display property to adjust the vertical positions of elements. The display property will be explained later in this course.
Practice 1
Objective:
Check how vertical-align works for small text in paragraphs
1. Update the body section of the HTML file
Add the code below at the end of the <body> section in the chapter11.html file. In this code, we set two new classes (vertical-align-check and small-text) to adjust formats to show the results clearly.
<h2>Vertical Align</h2>
<h3>Vertical Align (Small Text)</h3>
<p class="vertical-align-check">Vertical Align: Original <span class="small-text">Original</span></p>
<p class="vertical-align-check">
Vertical Align: Baseline
<span class="small-text" style="vertical-align: baseline;">Baseline</span>
</p>
<p class="vertical-align-check">
Vertical Align: Top
<span class="small-text" style="vertical-align: top;">Top</span>
</p>
<p class="vertical-align-check">
Vertical Align: Bottom
<span class="small-text" style="vertical-align: bottom;">Bottom</span>
</p>
<p class="vertical-align-check">
Vertical Align: Middle
<span class="small-text" style="vertical-align: middle;">Middle</span>
</p>
<p class="vertical-align-check">
Vertical Align: Super
<span class="small-text" style="vertical-align: super;">Super</span>
</p>
<p class="vertical-align-check">
Vertical Align: Sub
<span class="small-text" style="vertical-align: sub;">Sub</span>
</p>
<p class="vertical-align-check">
Vertical Align: 10px
<span class="small-text" style="vertical-align: 10px;">10px</span>
</p>
<p class="vertical-align-check">
Vertical Align: -10px
<span class="small-text" style="vertical-align: -10px;">-10px</span>
</p>
2. Update the CSS file
Open the practice.css file and add new code for adding styles to the vertical-align-check and small-text classes.
.vertical-align-check{
border:1px dotted #26BCCE;
line-height: 3;
width:300px;
}
.small-text{
font-size:0.5em;
line-height: 1;
}
3. Check the result with a browser
- Open chapter11.html with a browser.
- You can see how the
vertical-alignproperty works in a paragraph.
You can also check the sample result here (Demo Site).
Practice 2
Objective:
Check how vertical-align works for icons in paragraphs
1. Update the body section of the HTML file
Add the code below at the end of the <body> section in the chapter11.html file. In this code, we are using the same classes set in the previous practice.
For the icon image, we are using a smile.png file. As we want to use a transparent background for the icon, we are using a PNG file. You can use your own icon but make sure you set a proper file path in the code.
<h3>Vertical Align (Icons)</h3>
<p class="vertical-align-check">
Vertical Align : Original
<img src="img/smile.png" width="15px">
</p>
<p class="vertical-align-check">
Vertical Align : Baseline
<img src="img/smile.png" width="15px" style="vertical-align: baseline;">
</p>
<p class="vertical-align-check">
Vertical Align : Top
<img src="img/smile.png" width="15px" style="vertical-align: top;">
</p>
<p class="vertical-align-check">
Vertical Align : Bottom
<img src="img/smile.png" width="15px" style="vertical-align: bottom;">
</p>
<p class="vertical-align-check">
Vertical Align : Middle
<img src="img/smile.png" width="15px" style="vertical-align: middle;">
</p>
<p class="vertical-align-check">
Vertical Align : Super
<img src="img/smile.png" width="15px" style="vertical-align: super;">
</p>
<p class="vertical-align-check">
Vertical Align : Sub
<img src="img/smile.png" width="15px" style="vertical-align: sub;">
</p>
<p class="vertical-align-check">
Vertical Align : 10px
<img src="img/smile.png" width="15px" style="vertical-align: 10px;">
</p>
<p class="vertical-align-check">
Vertical Align : -10px
<img src="img/smile.png" width="15px" style="vertical-align: -10px;">
</p>
2. Check the result with a browser
- Open chapter11.html with a browser.
- You can see how the
vertical-alignproperty works for icons in a paragraph.
You can also check the sample result here (Demo Site).
Practice 3
Objective:
Check how vertical-align works in the table format
1. Update the body section of the HTML file
Add the code below at the end of the <body> section in the chapter11.html file. In this code, we are not using any classes as we directly add styles using type selectors.
<h3>Vertical Align in Table Cells</h3>
<table>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
<tr>
<td style="vertical-align: top;">
<img src="img/smile.png" width="30px">
</td>
<td style="vertical-align: middle;">
<img src="img/smile.png" width="30px">
</td>
<td style="vertical-align: bottom;">
<img src="img/smile.png" width="30px">
</td>
</tr>
<tr>
<td style="vertical-align: top;">vertical-align: top</td>
<td style="vertical-align: middle;">vertical-align: middle</td>
<td style="vertical-align: bottom;">vertical-align: bottom</td>
</tr>
</table>
<hr>
2. Update the CSS file
Open the practice.css file and add styles to the table, th, and td elements.
table{
background-color: white;
}
th{
background-color: #1E838A;
color: white;
}
td{
background-color: #B3EBEF;
height: 100px;
width: 100px;
text-align: center;
padding: 10px;
}
3. Check the result with a browser
- Open chapter11.html with a browser.
- You can see how the
vertical-alignproperty works in the table format.
You can also check the sample result here (Demo Site).
You can also learn this topic offline. Click 
.