Forum Mjukvara Programmering och digitalt skapande Tråd

CSS - Vertikal centrering av img i Flexbox?

1
Skriv svar
Permalänk
Medlem ★
●

CSS - Vertikal centrering av img i Flexbox?

Hej! Jag håller på med en webbplats och jag har snubblat över ett CSS-bekymmer. Det är i bebisstadiet så det finns inte mycket kod ännu. Jag tänker att jag kodar ihop "komponenter" av kod som jag sedan kan copy&paste där det ska användas upprepade gånger!

Se HTML-kod och CSS-kod nedan:

HTML

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timrå Färdtjänst</title>
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <script src="/js/main.js"></script>
</head>
<body>
    <header>
        <nav>

        </nav>
    </header>
    <main>
        <div class="foldable-step-container">
            <div class="foldable-step-inline-container">
            <div class="foldable-step-part-left-side">
                <span class="step-span">1/3</span>
                <img src="/images/map-a.svg" alt="Grafikelement" class="step-svg">
                <h2 class="h2-inline">Vart vill du åka?</h2>
            </div>
            <div class="foldable-step-part-right-side">
                <img src="/images/arrow_down_green.svg" alt="Grafikelement" class="step-svg">
            </div>
        </div>
        </div>
    </main>
    <footer>

    </footer>
</body>
</html>

CSS

:root{
    --main-bg-color: blue;
    --secondary-bg-color: lightblue;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: Ruda, sans-serif;
}

h1{
    font-size: 3.6rem;
}

h2{
    font-size: 2.4rem;
}

h3{
    font-size: 1.6rem;
}

.foldable-step-inline-container{
    display: flex;
    justify-content: space-between;
    background-color: var(--main-bg-color);
    margin-top: auto;
    margin-bottom: auto;
}

.step-svg{
    height: 45px;
    width: 45px;
}

.step-span{
    font-size: 2.4rem;
    font-weight: bold;
    color: white;
}

.h2-inline{
    display: inline;
    color: white;
}

Bekymret rör <img src="/images/map-a.svg" alt="Grafikelement" class="step-svg"> i HTML vars CSS-kod .step-svg är tänkt att göra så att den är centrerad vertikalt.

Notera i bilden nedan där jag markerat med mus hur textelement (span & h2) är längst ned i div medan img-elementet (en svg-fil) tycks vara högst upp i samma div? Lägg även märke till någon slags egen padding eller margin i bildelementet som buktar ut från sidorna av textelementen:

Lägger jag till: vertical-align: middle; under .step-svg i CSS så hamnar bildelementet istället längst ned i div. Ett annat förvirrande frågetecken är att den klass som får: vertical-align: middle; (exempelvis .step-span eller .h2-inline) inte centreras vertikalt medan närliggande element till den gör det? Hur kommer det sig?! 😕

Mvh,
WKL.

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag upptäckte att det verkade vara så simpelt som:

.foldable-step-inline-container{
    display: flex;
    justify-content: space-between;
    align-items:center;
    background-color: var(--main-bg-color);
}

Där jag la till align-items:center; för att centrera flex items (två divs) vertikalt. Jag lekte också med höjdstorleken för img-elementen och det verkar som om det blir knas om en svg-fil är högre än det andra. Men jag har fortfarande kvar den konstiga utbuktningen från textelementen mot det första bildelementet. Är det på grund av att <span> och <h2> (med display:inline;) har display: inline-egenskaperna?

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Redigera
Citera flera Citera
1
Skriv svar