CSS Lastnost: vertical-align

Lastnost vertical-align (slo. Navpična poravnava) nastavi navpično poravnavo elementa.
PRIMER
<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Navpična poravnava elementov</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 30px;
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        .primer {
            margin: 20px;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background-color: #edda02;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .label {
            font-style: italic;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            color: #333333;
        }
        .demo {
            font-size: 18px;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 10px;
            color: #333333;
        }
        .vrednost {
            color: #2196F3;
            font-family: monospace;
            font-size: 0.9em;
        }
        img {
            width: 24px;
            height: 24px;
        }
        
        .skupina1 img { vertical-align: middle; }
        .skupina2 img { vertical-align: top; }
        .skupina3 img { vertical-align: bottom; }
        .skupina4 img { vertical-align: text-top; }
        .skupina5 img { vertical-align: text-bottom; }
        .skupina6 img { vertical-align: super; }
        .skupina7 img { vertical-align: sub; }
    </style>
</head>
<body>
    <!-- Najpogosteje uporabljene vrednosti -->
    <div class="primer">
        <div class="label">Najpogosteje uporabljene vrednosti vertical-align</div>
        
        <div class="demo skupina1">
            <span class="vrednost">middle:</span> 
            To je besedilo z <img src="/icons/smiley-black.svg" alt="ikona"> navpično poravnano ikono na sredini.
        </div>

        <div class="demo skupina2">
            <span class="vrednost">top:</span> 
            To je besedilo z <img src="/icons/smiley-black.svg" alt="ikona"> navpično poravnano ikono na vrhu.
        </div>

        <div class="demo skupina3">
            <span class="vrednost">bottom:</span> 
            To je besedilo z <img src="/icons/smiley-black.svg" alt="ikona"> navpično poravnano ikono na dnu.
        </div>

        <div class="demo skupina4">
            <span class="vrednost">text-top:</span> 
            To je besedilo z <img src="/icons/smiley-black.svg" alt="ikona"> navpično poravnano ikono na vrhu besedila.
        </div>

        <div class="demo skupina5">
            <span class="vrednost">text-bottom:</span> 
            To je besedilo z <img src="/icons/smiley-black.svg" alt="ikona"> navpično poravnano ikono na dnu 
            besedila.
        </div>
    </div>

    <!-- Posebne vrednosti -->
    <div class="primer">
        <div class="label">Posebne vrednosti za formule in posebno besedilo</div>
        
        <div class="demo skupina6">
            <span class="vrednost">super:</span> 
            To je besedilo z <img src="/icons/smiley-black.svg" alt="ikona"> dvignjeno ikono (kot pri x²).
        </div>

        <div class="demo skupina7">
            <span class="vrednost">sub:</span> 
            To je besedilo s <img src="/icons/smiley-black.svg" alt="ikona"> spuščeno ikono (kot pri H₂O).
        </div>
    </div>
</body>
</html>
REZULTAT