Text Zentrieren

  • Hallo,


    Ich möchte einige Zeilen an Text auf meiner Webseite zentrieren.

    Ich habe vorerst ein paar Schnipsel zum ausprobieren geschrieben:


    HTML

    <body>

    <div id="test">

    <a>mittige zeile 1<br></a>

    <a>mittige zeile 2</a>

    </div>

    </body>


    CSS

    #test {

    width:100%;

    height:500px;

    background:green;

    }

    #test a {

    margin: 0;

    position: relative;

    top: 50%;

    left: 50%;

    margin-right: 100%;

    transform: translate(-50%, -50%)

    }


    Damit wird der Text aber nicht ganz mittig dargestellt, sondern er beginnt rechts unterhalb des Mittelpunktes.

    Wie kann ich den Text genau Mittig platzieren (dynamisch)? Also ich möchte, dass wenn meine Webseite 1000px*1000px Pixel groß ist und der Text 100px*20px, dass er im Punkt 450/490 beginnt. Und nicht wie bisher im Punkt 500/500.


    Danke im Vorraus

    Corlaren

  • Da gibt es viele möglichkeiten.

    Am besten wäre mit Flexbox anzufangen.

    Das erleichtert dir später einige Zeit und ärger.

    Bei den Html den du jetzt hast kannst du die Css löschen und zb den body ein text-align:center geben.

    Dann hast du in der Horizontale das schon mal mittig.

    Vertikal zentrieren könnte man jetzt sehr gut mit Flexbox machen.


    Bevor du dir jetzt um sowas gedanken machst könntest du doch mal sagen wie es aussehen soll.

    Wenn du das jetzt mit deinen Code mittig hinbekommen tust,

    und dann einen neuen Container da mit reinbaust,

    ist es wieder nicht mittig weil du den Container relative gegeben hast.


    Deshalb wäre von Anfang an Flexbox lernen an besten

    http://www.css-wiki.com/listings/flexbox.html