What is CSS Vertical Align

vertical-align [It is assumed you know HTML before you read this CSS Vertical Align tutorial]
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box. The vertical-align property in CSS controls how elements set next to each other on a line are lined up.

Where Can I Use CSS Vertical Align

You can use CSS Vertical Align styles in any HTML on below elements objects.

  1. Text – CSS Vertical Align Text
  2. Image – CSS Vertical Align Image
  3. Table Cell – CSS Vertical Align Table
  4. Div – CSS Vertical Align Div
  5. Span –  CSS Vertical Align Span

CSS Vertical Align Div

So basically a vertical-align property can be used in two contexts:

  1. To vertically align an inline element’s box inside its containing line box. For example, it could be used to vertically position an image in a line of text.
  2. To vertically align the content of a cell in a table. [ Note that vertical-align only applies to inline, inline-block and table-cell elements: you can’t use it to vertically align block-level elements. ]

 

CSS vertical-align Property With Syntax

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

 

CSS Vertical Align Examples In HTML Syntax

<p>
top: <img style=”vertical-align: top” src=”star.png”/>
middle: <img style=”vertical-align: middle” src=”star.png”/>
bottom: <img style=”vertical-align: bottom” src=”star.png”/>
super: <img style=”vertical-align: super” src=”star.png”/>
sub: <img style=”vertical-align: sub” src=”star.png”/>
</p>

<p>
text-top: <img style=”vertical-align: text-top” src=”star.png”/>
text-bottom: <img style=”vertical-align: text-bottom” src=”star.png”/>
0.2em: <img style=”vertical-align: 0.2em” src=”star.png”/>
-1em: <img style=”vertical-align: -1em” src=”star.png”/>
20%: <img style=”vertical-align: 20%” src=”star.png”/>
-100%: <img style=”vertical-align: -100%” src=”star.png”/>
</p>

 

Results Output Of Above Vertical Align Syntax

top: star middle: star bottom: star super: star sub: star

text-top: star text-bottom: star 0.2em: star -1em: star 20%: star -100%: star

 

Example Of Vertical align an image:

img.a {
vertical-align: baseline;
}

img.b {
vertical-align: text-top;
}

img.c {
vertical-align: text-bottom;
}

img.d {
vertical-align: sub;
}

img.e {
vertical-align: super;
}

 

Vertical alignment in a table cell

HTML

<table>
<tr>
<td style=”vertical-align: baseline”>baseline</td>
<td style=”vertical-align: top”>top</td>
<td style=”vertical-align: middle”>middle</td>
<td style=”vertical-align: bottom”>bottom</td>
<td>
<p>Why Zoom App Download For PC Free? Zoom is the literal definition of year 2020 and still ongoing while I write — not joking. Be it family talk, lessons and courses, work conferences, weddings or household occasions — every thing was virtual in 2020, 2121 and still ongoing while we are writing this article.</p>
<p>Utilizing the Zoom app additionally guarantees a great deal of neat options otherwise unavailable with Chrome extension.</p>
</td>
</tr>
</table>


CSS

table {
margin-left: auto;
margin-right: auto;
width: 80%;
}

table, th, td {
border: 1px solid black;
}

td {
padding: 0.5em;
font-family: monospace;
}

Result Of  CSS Vertical Align Image

baseline top middle bottom Why Zoom App Download For PC Free? Zoom is the literal definition of year 2020 and still ongoing while I write — not joking. Be it family talk, lessons and courses, work conferences, weddings or household occasions — every thing was virtual in 2020, 2121 and still ongoing while we are writing this article.

Utilizing the Zoom app additionally guarantees a great deal of neat options otherwise unavailable with Chrome extension.

Browser Support For CSS Vertical Align Text Image Div Span

Below are the browser versions that fully supports the property.

Property Chrome Edge Firefox Safari Opera
vertical-align 1.0 4.0 1.0 1.0 4.0

 

Write A Comment

Pin It