HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> #point{ vertical-align: baseline; } #point1{ vertical-align: sub; } #point2{ vertical-align: super; } #point3{ vertical-align: text-top; } #point4{ vertical-align: middle; } #point5{ vertical-align: text-bottom; } #point6{ vertical-align: -45px; } #point7{ vertical-align: -250%; } </style> </head> <body> <h1>CSS direction Property</h1> <h2>vertical-align: baseline; (default value)</h2> <div><img id="point" src="apple.png">- This is apple.</div> <h2>vertical-align: sub;</h2> <div><img id="point1" src="apple.png" width="12" height="12">- This is apple.</div> <h2>vertical-align: super;</h2> <div><img id="point2" src="apple.png" width="12" height="12">- This is apple.</div> <h2>vertical-align: text-top;</h2> <div><img id="point3" src="apple.png">- This is apple.</div> <h2>vertical-align: middle;</h2> <div><img id="point4" src="apple.png">- This is apple.</div> <h2>vertical-align: text-bottom;</h2> <div><img id="point5" src="apple.png">- This is apple.</div> <h2>vertical-align: -45px;</h2> <div><img id="point6" src="apple.png">- This is apple.</div> <h2>vertical-align: -250%;</h2> <div><img id="point7" src="apple.png">- This is apple.</div> <p><strong>Note</strong>: To see the difference between 'sub' and 'super', the size of the apple is reduced.</p> </body> </html>
OUTPUT
×

Save as Private