0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>If we have a property for horizontal alignment, then shouldn’t there also be one for vertical alignment? Yes, this is what the vertical-align property is for.</p>
1
<p>If we have a property for horizontal alignment, then shouldn’t there also be one for vertical alignment? Yes, this is what the vertical-align property is for.</p>
2
<p>This property can be used to align<i>inline</i>elements for a particular line. The simplest example that we will explore in this assignment is to align the <img> image vertically in a text line.</p>
2
<p>This property can be used to align<i>inline</i>elements for a particular line. The simplest example that we will explore in this assignment is to align the <img> image vertically in a text line.</p>
3
<p>The vertical-align property can be given many values, but the most often used ones are:</p>
3
<p>The vertical-align property can be given many values, but the most often used ones are:</p>
4
<ol><li>top - It aligns the content along the top edge of the line;</li>
4
<ol><li>top - It aligns the content along the top edge of the line;</li>
5
<li>middle - It aligns the content along the middle of the line;</li>
5
<li>middle - It aligns the content along the middle of the line;</li>
6
<li>bottom - It aligns the content along the bottom edge of the line;</li>
6
<li>bottom - It aligns the content along the bottom edge of the line;</li>
7
<li>baseline - It aligns the content along the baseline of the line (default value).</li>
7
<li>baseline - It aligns the content along the baseline of the line (default value).</li>
8
</ol><p>Unlike the text-align property, the vertical-align property is applied to the element itself and not to its container:</p>
8
</ol><p>Unlike the text-align property, the vertical-align property is applied to the element itself and not to its container:</p>
9
HTML: <p> <img src="picture.png" alt="I’m a picture"> I am text inside a paragraph </p> CSS: img { vertical-align: middle; }<p>In addition to keywords for vertical-align, you also have the ability to set the values in pixels and percentages.</p>
9
HTML: <p> <img src="picture.png" alt="I’m a picture"> I am text inside a paragraph </p> CSS: img { vertical-align: middle; }<p>In addition to keywords for vertical-align, you also have the ability to set the values in pixels and percentages.</p>
10
<p>The percentage value (for example, vertical-align: 100%) is calculated relative to the specified height of the line (line-height). A value of 0% is the same as the baseline, and it can be both positive and negative.</p>
10
<p>The percentage value (for example, vertical-align: 100%) is calculated relative to the specified height of the line (line-height). A value of 0% is the same as the baseline, and it can be both positive and negative.</p>
11
<p>The value in pixels (for example, vertical-align: 10px) works similarly to a percentage, only it is calculated in pixels that are either added or subtracted. The 0px value is equivalent to baseline.</p>
11
<p>The value in pixels (for example, vertical-align: 10px) works similarly to a percentage, only it is calculated in pixels that are either added or subtracted. The 0px value is equivalent to baseline.</p>