Einfaches Div mit zwei Sätzen immer mittig auf der Seite anzeigen lassen?

  • Code
    1. <div class="titletext">
    2. <a class="titletext01"> Das ist der obere Satz.</a>
    3. <br>
    4. <a class="titletext02"> Das soll direkt darunter stehen</a>
    5. </div>


    Wie sähe das CSS aus, wenn ich einfach den div.titletext immer mittig auf der Seite anzeigen wollte?


    Code
    1. div.titletext{
    2. font-size: 4em;
    3.     (...)
    4. }


    Die beiden Sätze sollen mittig auf der Seite und linksbündig dargestellt werden.


    Hat jemand eine Antwort?


    LG und Danke :)

  • Die Frage ist nicht eindeutig: "Mittig" oder "Mittung und Linksbündig"? Wahrscheinlich innerhalb der Mitte linksbündig.


    In jedem Fall muss das umgebende Element die Höhe der Seite bekommen. Die horizontale und vertikale Zentrierung erfolgt dann mittels Flexbox.


    Im aktuellen HTML soll der Quelltext zudem so schlank wie möglich gehalten werden. Jedem Element eine Klasse zu vergeben ist somit schlechter Stil.


    Das br-Element hat zudem eine semantische Bedeutung, die hier nicht gegeben ist.


    Nach deinen knappen Informationen sehe ich zu folgendem Quelltext


    Code
    1. <div class="titletext">
    2. <div>
    3. <a> Das ist der obere Satz.</a>
    4. <a> Das soll direkt darunter stehen</a>
    5. </div>
    6. </div>


    dieses CSS


    Code
    1. .titletext {
    2. background-color: navajowhite;
    3. height: 100vh;
    4. display: flex;
    5. justify-content: center;
    6. align-items: center;
    7. }
    8. .titletext a {
    9. display: block;
    10. }


    Die Hintergrundfarbe zeigt die Größe des div.titletext.

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von MrMurphy ()