CSS Vertical Alignment

Please Share On:

Definition:

CSS vertical alignment is defined by text-align property with top, middle and bottom values.

By default, table header <th> and table data <td> contents are defined in middle.

Syntax:

vertical-align: top | middle | Bottom

Default Vertical Alignment Source Code:

This is the default vertical alignment property where the vertical-align property is not used. See the example below:

!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

</style>
</head>
<body>

<h3>Example of CSS Table Default Horizontal Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Top Vertical Alignment Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

td {
  height: 30px;
  vertical-align: top;
}

</style>
</head>
<body>

<h3>Example of CSS Table Default Vertical Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Middle Vertical Alignment Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

td {
  height: 30px;
  vertical-align: middle;
}

</style>
</head>
<body>

<h3>Example of CSS Table Default Vertical Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

Bottom Vertical Alignment Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px dotted red;
  }

th, td {
  padding: 8px;
}

th {
  background-color: darkmagenta;
  color: white;
}

tr:nth-child(even){
   background-color: cornsilk
}

td {
  height: 30px;
  vertical-align: bottom;
}

</style>
</head>
<body>

<h3>Example of CSS Table Default Vertical Alignment</h3>

<table>
  <tr>
    <th>Roll No.</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Hobby</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Harry</td>
    <td>Potter</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Brad</td>
    <td>Pitt</td>
    <td>Acting</td>
  </tr>
  <tr>
    <td>3.</td>
    <td>David</td>
    <td>Warner</td>
    <td>Sports</td>
  </tr>
</table>

</body>
</html>

Output:

You may be interested in the following topics:

Post Views: 493

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial