Chapter 11. CSS: Styling Text and Images

Vertical-align

Vertical-align
Tag:
course iconBack to the course page

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

  1. Additional small text in the paragraph.
  2. Inline icons
  3. 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.

chapter11.html
<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.

chapter11.html
<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.

practice.css
td{
  vertical-align: top;
}

Ideavertical-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.

chapter11.html
<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.

practice.css
.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-align property works in a paragraph.

You can also check the sample result here (Demo Site link).

link demo code

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 backgroud 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.

chapter11.html
<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-align property works for icons in a paragraph.

You can also check the sample result here (Demo Site link).

link demo code

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.

chapter11.html
<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.

practice.css
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-align property works in the table format.

You can also check the sample result here (Demo Site link).

link demo code

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

  1. Additional small text in the paragraph.
  2. Inline icons
  3. 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.

chapter11.html
<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.

chapter11.html
<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.

practice.css
td{
  vertical-align: top;
}

Ideavertical-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.

chapter11.html
<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.

practice.css
.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-align property works in a paragraph.

You can also check the sample result here (Demo Site link).

link demo code

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 backgroud 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.

chapter11.html
<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-align property works for icons in a paragraph.

You can also check the sample result here (Demo Site link).

link demo code

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.

chapter11.html
<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.

practice.css
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-align property works in the table format.

You can also check the sample result here (Demo Site link).

link demo code

Tag:
course iconBack to the course page
check recently viewed topics (history)
history
check bookmarked topics
Library
give rating and feedback
rating
share a URL via email or chat app
Share
check recently viewed topics (history)
history
check bookmarked topics
Library
give rating and feedback
rating
share a URL via email or chat app
Share