Home
CSS
CSS Text
Text Alignment
Tryit: The vertical-align property
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <style> 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; } </style> </head> <body> <h1>The vertical-align Property</h1> <h2>vertical-align: baseline (default):</h2> <p>Align the orange square to baseline: <img class="a" src="sqorange.gif" width="9" height="9"></p> <h2>vertical-align: text-top:</h2> <p>Align the orange square to text-top: <img class="b" src="sqorange.gif" width="9" height="9"></p> <h2>vertical-align: text-bottom:</h2> <p>Align the orange square to text-bottom: <img class="c" src="sqorange.gif" width="9" height="9"></p> <h2>vertical-align: sub:</h2> <p>Align the orange square to sub: <img class="d" src="sqorange.gif" width="9" height="9"></p> <h2>vertical-align: sup:</h2> <p>Align the orange square to super: <img class="e" src="sqorange.gif" width="9" height="9"></p> </body> </html>
