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

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

A

annsen

Mitglied
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!!
 
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.
 
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:
MrMurphy schrieb:
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.
Zum Vergrößern anklicken....
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.
 
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:
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).
Zum Vergrößern anklicken....

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?
 
MrMurphy schrieb:
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?
Zum Vergrößern anklicken....
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben