CSS Demo
CSS Code
Output
<!DOCTYPE html> <html> <head> <style> .middle > * { vertical-align: middle; } .top > * { vertical-align: top; } .bottom > * { vertical-align: bottom; } .sub > * { vertical-align: sub; } .super > * { vertical-align: super; } .text-top > * { vertical-align: text-top; } .text-bottom > * { vertical-align: text-bottom; } .baseline > * { vertical-align: baseline; } .pixel > * { vertical-align: 30px; } .percentage > * { vertical-align: -500%; } body { padding: 20px; background: #eee; } h2 { display: inline-block; margin: 0; width: 150px; text-align: right; font: bold 20px Sans-Serif; } div { margin: 0 0 30px 0; padding: 10px; background: white; white-space: nowrap; } </style> </head> <body> <div class="middle"> <h2>Middle</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> <div class="top"> <h2>Top</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> <div class="bottom"> <h2>Bottom</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> <div class="sub"> <h2>Sub</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> <div class="super"> <h2>Super</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> <div class="text-top"> <h2>Text Top</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> <div class="text-bottom"> <h2>Text Bottom</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> <div class="baseline"> <h2>Baseline</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> <div class="pixel"> <h2>30px</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> <div class="percentage"> <h2>-500%</h2> <img src="https://placekitten.com/100/100"> <img src="https://placekitten.com/200/150"> <img src="https://placekitten.com/220/80"> </div> </body> </html>
Middle
Top
Bottom
Sub
Super
Text Top
Text Bottom
Baseline
30px
-500%