Frage align-self: center / justify-self: center

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

annsen

Mitglied
9 Juni 2016
98
2
8
Ich habe grad Stunden mit der Fehlersuche zugebracht und grad eben, beim Schreiben meiner Anfrage, habe ich anscheinend den entscheidenden Hinweis gefunden.

Ich habe ein a-Element, das eine Flexbox ist und zwei span-Elemente enthält.
Im ersten Span-Element (display:block) wollte ich den Inhalt horizontal und vertikal zentrieren. Vertikal war das Zentrieren mit "align-self: center;" kein Problem aber das horizontale Zentrieren hat einfach nicht funktioniert.

Jetzt grad hab ich den Hinweis gefunden: justify-self.PNG

Die CSS-Eigenschaft wird also anscheinend in einer FlexBox ignoriert.
Kann mir das nochmal jemand bestätigen, der Erfahrung damit hat? (und einen Tipp geben, wie ich in der Flexbox zentrieren kann - ausschließlich mit "margin-.. :auto;"?)

Vielen Dank vorab!!
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Diese Frage wird hier diskutiert:
wie ich in der Flexbox zentrieren kann - ausschließlich mit "margin-.. :auto;"?
Es gibt ja nicht nur die Möglichkeit, ein Flexitem für sich zu zentrieren mit align-self sondern auch die Anweisungen für den Flexcontainer: align-items und justify-content. Mit letzterem kannst Du die Items problemlos horizontal zentrieren. Eine Zentrierung eines Items für sich horizontal bzw. in der Hauptachse würde keinen Sinn machen wie in dem Link oben beschrieben.
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.604
237
63
Ich habe das Problem noch nicht verstanden.

Soll das erste span-Element innerhalb des a-Elements zentriert werden? Und falls ja: Wie soll das zweite span-Element plaziert werden?

Oder soll der Inhalt des ersten span-Elements innerhalb des span-Elements zentriert werden? Dann müsste das span-Element gleichzeitig Flex-Container und Flex-Item sein.
 
Werbung:

annsen

Mitglied
9 Juni 2016
98
2
8
Vielen Dank!

Ich habe versucht eine Navigation zu erstellen. Die besteht aus einer ul/li.
Die Listenelemente sind untereinander positionierte Navigationspunkte.
Jeder Navigationspunkt setzt sich aus 2 nebeneinander liegenden Bereichen (span) zusammen:
1. ein Span (.s1) das ein Icon enthält
2. ein Span (s.2) das die Menüpunktbeschriftung enthält

Warum trenne ich den Iconbereich von der Beschriftung je Navigationspunkt/Listenzeile?
Zum einen wollte ich gern die Icons (die alle unterschiedliche Breiten/Höhen haben) in ihrem span-Bereich zentrieren (so dass die alle untereinander ausgerichtet/zentriert sind) und dann wollte ich zusätzlich in den rechts daneben liegenden span.s2-Bereichen, die Menübeschriftung linksbündig untereinder ausrichten.

Ich hatte auch schon überlegt ob es Sinn macht, die li-Elemente mit den darin enthaltenen span-Elementen IN die a-Elemente zu verschieben? Das auch das hat nicht wie gewünscht funktioniert:
HTML:
<ul>
    <a class="active" href="#"><li><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;1</span></li></a>
    <a href="#"><li><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;1</span></li></a>
    <a href="#"><li><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;1</span></li></a>
    <a href="#"><li><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;1</span></li></a>
    <a href="#"><li><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;1</span></li></a>
</ul>


Aktuell sieht der Versuch so aus:

HTML:
<div class="sidebar">

    <header>...</header>

    <ul>

        <li><a class="active" href="#"><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;1</span></a></li>
        <li><a href="#"><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;2</span></a></li>
        <li><a href="#"><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;3</span></a></li>
        <li><a href="#"><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;4</span></a></li>
        <li><a href="#"><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;5</span></a></li>         
    </ul>

</div>


CSS:
.sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    width: 300px;
    height: auto;
    margin-top: 100px;
    background-color: rgb(4, 35, 49);
    }

.sidebar header {
    background-color: rgb(4, 35, 49);
    }

.sidebar ul li {
    height: 60px;
    }

.sidebar ul li a {
    color: rgb(255, 255, 255);
    width: 100%;
    line-height: 2rem;
    background-color: rgb(4, 35, 49);
    display: flex;
    flex-direction: row;
    }

.sidebar ul li a span.s1 {
    margin: auto;
    }

.sidebar ul li a span.s2 {
    margin-left: 1rem;
    text-transform: uppercase;
    }

.sidebar ul li a:hover {
    padding-left: 10px;
    color: rgb(255, 102, 0);
    }

.sidebar ul li a.active {
    color: rgb(255, 102, 0);
    }

Vielleicht hat ja jemand noch einen Tipp...
 
Zuletzt bearbeitet:

annsen

Mitglied
9 Juni 2016
98
2
8
Ich habe das Problem noch nicht verstanden.

Soll das erste span-Element innerhalb des a-Elements zentriert werden? Und falls ja: Wie soll das zweite span-Element plaziert werden?

Oder soll der Inhalt des ersten span-Elements innerhalb des span-Elements zentriert werden? Dann müsste das span-Element gleichzeitig Flex-Container und Flex-Item sein.
Der letzte Absatz beschreibt es ganz gut - im ersten span-Element je <li> ist ein Icon, das im span-Element zentriert werden soll (horizontal und vertikal). Die Iccons haben alle unterschiedliche Maße.
Ich hab das versucht oben noch etwas ausführlicher zu erklären.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Die Iccons haben alle unterschiedliche Maße.
Dann wirst Du wohl nicht darum herum kommen, diesem span eine feste Breite zu geben (was man i. all. nicht so gern tut). So funktioniert es bei mir:
CSS:
        .s1 {
            width: 4em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            position: fixed;
            left: 0;
            /* width: 300px; */
            height: auto;
            margin-top: 100px;
            background-color: rgb(4, 35, 49);
        }

        .sidebar header {
            background-color: rgb(4, 35, 49);
        }

        .sidebar ul li {
            height: 60px;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }

        .sidebar ul li a {
            color: rgb(255, 255, 255);
            width: 100%;
            line-height: 2rem;
            background-color: rgb(4, 35, 49);
            display: flex;
            flex-direction: row;
        }

        .sidebar ul li a span.s1 {
            margin: auto;
        }

        .sidebar ul li a span.s2 {
            margin-left: 1rem;
            text-transform: uppercase;
        }

        .sidebar ul li a:hover {
            padding-left: 10px;
            color: rgb(255, 102, 0);
        }

        .sidebar ul li a.active {
            color: rgb(255, 102, 0);
        }
Um den Effekt sichtbar zu machen, habe ich die Platzhalter für die Icons unterschiedlich breit gemacht:
HTML:
        <ul>
            <a class="active" href="#">
                <li><span class="s1">I</span><span class="s2">Menüpunkt&nbsp;1</span></li>
            </a>
            <a href="#">
                <li><span class="s1">IC</span><span class="s2">Menüpunkt&nbsp;1</span></li>
            </a>
            <a href="#">
                <li><span class="s1">ICO</span><span class="s2">Menüpunkt&nbsp;1</span></li>
            </a>
            <a href="#">
                <li><span class="s1">ICON</span><span class="s2">Menüpunkt&nbsp;1</span></li>
            </a>
            <a href="#">
                <li><span class="s1">IC</span><span class="s2">Menüpunkt&nbsp;1</span></li>
            </a>
        </ul>
 
Werbung:

annsen

Mitglied
9 Juni 2016
98
2
8
Das funktioniert so, vielen Dank!!

Ich versuche jetzt das Ganze so anzupassen, dass bei kleinen Viewports nur der s1-Bereich sichtbar ist (der s2-Bereich soll ausgeblendet werden und nur beim hovern von s1 angezeigt werden).

Da ich da jetzt schon wieder ein paar Tage teste, divs eingefügt und wieder gelöscht habe und alle mir logisch erscheinenden Elementeigenschaften versucht habe zu korrigieren, ohne das gewünschte Ergebnis erhalten zu haben, muss ich noch einmal nachhaken.
Ist das grundsätzlich ohne JS und mit Flexbox möglich?

Die beiden span-Elemente befinden sich ja innerhalb des a-Elements.
Die Navigation wird ohne Aktion korrekt auf kleinen Viewports angezeigt: nur span.s1 ist (korrekt ausgerichtet!) zu sehen.
Wenn ich dann mit der Maus über das a-Element fahre, wird der Inhalt von span.s2 angezeigt. Allerdings links ausgerichtet am a-Element, also über s1 - was ja logisch ist, da aktuell "position: absolute;" gilt.
Lösche ich "position: absolute;", rutscht das .s1-Element ganz nach links an den Rand.
Warum gelten hier die vorher festgelegten Eigenschaften:

display: flex;
align-items: center;
justify-content: center;

für span.s1 anscheinend nicht mehr?

Vielen Dank für Tipps/Hinweise!!


CSS:
        .s1 {
            width: 4em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            position: fixed;
            left: 0;
            /* width: 300px; */
            height: auto;
            margin-top: 100px;
            background-color: rgb(4, 35, 49);
        }

        .sidebar header {
            background-color: rgb(4, 35, 49);
        }

        .sidebar ul li {
            height: 60px;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }

        .sidebar ul li a {
            color: rgb(255, 255, 255);
            width: 100%;
            line-height: 2rem;
            background-color: rgb(4, 35, 49);
            display: flex;
            flex-direction: row;
        }

        .sidebar ul li a span.s1 {
            margin: auto;
        }

        .sidebar ul li a span.s2 {
            margin-left: 1rem;
            text-transform: uppercase;
        }

        .sidebar ul li a:hover {
            padding-left: 10px;
            color: rgb(255, 102, 0);
        }

        .sidebar ul li a.active {
            color: rgb(255, 102, 0);
        }

@media (max-width: 860px) {

    .sidebar {
        height: auto;
        width: 70px;
        left: 0;
        margin: 100px 0;
        }

    .sidebar ul li a span.s1 {
        margin-left: -5px;
        }

    .sidebar ul li a span.s2 {
        position: absolute;
        margin-left: 20px;
        opacity: 0;
        visibility: hidden;
        }

    .sidebar ul li a:hover {
        width: 280px;
        }

    .sidebar ul li a:hover span.s2 {
        opacity: 1;
        visibility: visible;
        }

}
 
Zuletzt bearbeitet:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.604
237
63
Ich versuche jetzt das Ganze so anzupassen, dass bei kleinen Viewports nur der s1-Bereich sichtbar ist (der s2-Bereich soll ausgeblendet werden und nur beim hovern von s1 angezeigt werden).

Frage: Wie sollen Besucher von Geräten mit kleinen Viewports (zum Beispiel Smartphones) an die ausgeblendeten Daten kommen, deren Geräte mit Touchscreens keinen hover-Effekt kennen?
 

annsen

Mitglied
9 Juni 2016
98
2
8
Frage: Wie sollen Besucher von Geräten mit kleinen Viewports (zum Beispiel Smartphones) an die ausgeblendeten Daten kommen, deren Geräte mit Touchscreens keinen hover-Effekt kennen?
Die Problematik habe ich auf dem Schirm - darum wollte ich mich dann im nächsten Schritt kümmern. Aktuell ist mein Ziel aber erstmal zu verstehen, wie sich die Elemente verhalten.
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.262
449
83
68
Auf jeden Fall ist dein HTML zunächst mal nicht valide: ul darf nur li-Tags enthalten, ein a-Tag dazwischen geht nicht.
Und dann ist position: absolute; immer eine potenzielle Quelle von Problemen, versuche es besser ohne und dann die verbleibenden Probleme zu verstehen und zu lösen.
 
Werbung: