Text zentrieren

  • Hallo,

    ich bin gerade dabei meine Website responsive zu machen, jedoch bekomme ich einen Text nicht zentriert und vertikalen text nicht an beide Ränder. Alle sind oben links in der Ecke.

    Da ich aber erst am Anfang vom Programmieren generell bin habe ich auch keine Ahnung, was sonst noch machen könnte.

    HTML: Index.html
    <div class="Home">
                <a href="Index.html"><h1><center>HOME</center></h1></a></div>
        <div class="About">
                <a href="About.html"><h1><center>ABOUT</center></h1></a></div>
    
        <div class="Contact">
                <a href="Contact.html"><h1><center>CONTACT</center></h1></a></div>


    Wie es oben links in der Ecke aussieht:

    [Blockierte Grafik: https://prnt.sc/we0725]


    Danke schonmal an alle die helfen.

  • Guten Morgen TakeOnMii, ein frohes neues Jahr und willkommen im Forum!


    Da geht ja einiges durcheinander:

    <center> ist veraltet und sollte nicht mehr verwendet werden.

    float ist für diesen Zweck ebenfalls veraltet und die Kombination mit Flex macht keinen Sinn.

    Mit flex bist Du dagegen auf dem richtigen Weg, um das Element in beiden Richtungen zu zentrieren.

    Um es vertikal zu zentrieren ist freier Raum nötig, daher habe ich zur Demonstration die Höhe auf 100vh gesetzt.

    So funktioniert es dann:

  • Frohes neues auch von mir und danke für die Hilfe.

    Nur leider ist es auch horizontal zentriert und mit justify-content: flex-end; bewegt es sich fast gar nicht. Zudem folgt es auch nicht position: fixed; dabei ist es oben links im Eck.

  • Wenn ich das richtig verstehe oder errate, willst Du "Home" in der Mitte und die anderen beiden links und rechts?

    Versuche, ob dies das ist, was Du dir vorstellst:

  • Ja du hattest das richtig verstanden und danke nochmal das du auch aktiv mithilfst.

    Nur leider hat das jetzt meine ganze Seite umdesigned. Ich hatte da vorher einen Zeitstrahl mit HTML, CSS und JS aber jetzt existiert nur noch der Text und die Videos von dem Zeitstrahl.

  • Ich habe die Seite zwar noch nicht Online, aber ich kann dir den Code eben schicken:

  • Da fehlt die schließende geschweifte Klammer bei .Contact:

    Code
    .Contact {
        flex-direction: row;
        display: flex;
        transform: rotate(-90deg);
        z-index: 3;
        position: fixed;
        right: 0;
        top: 5em;
        text-align: center;
    } /* <-- fehlte */
  • Nur so ein kleiner Fehler und fast alles bricht zusammen.

    Naja danke dir und wie mach ich die an der Seite wieder zentriert?

    Sorry das ich dich so Durchlöcher mit Fragen.

  • Zitat

    Sorry das ich dich so Durchlöcher mit Fragen.

    Kein Problem, dafür ist das Forum ja da.

    Zitat

    wie mach ich die an der Seite wieder zentriert?

    Ein Möglichkeit ist, margin: 0 auto; zu verwenden:

    Code
    .timeline-item {
        margin: 0 auto;
    }

    Oder mit Flexlayout.

  • Ich habe die Seite zwar noch nicht Online, aber ich kann dir den Code eben schicken:

    Ich weiß dass dein Problem (zumindest anscheinend) bereits gelöst ist, aber trotzdem: Bevor du die Seite mit CSS entsprechend formatierst, solltest du erstmal die Fehler im HTML beseitigen: der Code enthält 12 Fehler und 2 Warnungen. Auch Semantisch ist der Code eine Katastrophe und eine einzige div-Suppe: verwende semantisch passende Elemente mit dem du dem Client auch mitteilst was da steht. Die Links zum Beispiel wären gerne eine Liste (<ul>) in einem nav-Element - der Kommentar "Links" ist dann auch überflüssig da das Element selbsterklärend ist. Jeder Link ist dann in einem <li> wobei <h1> und <center> ersatzlos entfallen (vergiss dass es <center> überhaupt mal gab und <h1> ist für die Hauptüberschrift der Seite, nicht für die Navigationslinks).

    Übrigens: eine CSS-Eigenschaft "font-color" gibt es nicht.

  • Sorry für die späte Antwort, aber bei mir in Visual Studio Code zeigt der mir keine Fehler an.

    den Fehler mit font-color zeigt VS Code an, die Fehler im HTML nicht da der Code (standardmäßig) nicht validiert wird, nur das <center> wäre anhand der anderen Farbe als falsch erkennbar (wobei der farbliche Unterschied etwas gering ist). Semantisch falsche Elemente kann VS Code (und auch der Validator) nicht erkennen, woher sollen die beiden wissen was da genau geschrieben wurde?

    Was mir gerade noch auffällt: warum schreibst du statt &rarr; nicht den Pfeil direkt in den Code? Mit UTF-8 ist das kein Problem …

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!