DIV-Elemente vertikal zentrieren

Diskutiere DIV-Elemente vertikal zentrieren im CSS Forum im Bereich Programmierung; Hallo zusammen! Ich habe zwar schon viele Jahre Webprogrammier-Erfahrung, diese aber schon lange nicht mehr aktiv angewandt und bin daher etwas...
Neues Thema erstellen Antworten
  • DIV-Elemente vertikal zentrieren Beitrag #1
S
Sunlion
New member
Beiträge
3
Punkte Reaktionen
0
Hallo zusammen!
Ich habe zwar schon viele Jahre Webprogrammier-Erfahrung, diese aber schon lange nicht mehr aktiv angewandt und bin daher etwas eingerostet.
Im nachfolgenden Beispiel möchte ich die hellgrauen Spalten, die aktuell oben ausgerichtet sind, vertikal auf dem Bildschirm zentrieren. Wenn neue (hellblaue) Elemente hinzugefügt werden, sollen sie sich in der Höhe weiter ausdehnen (machen sie jetzt bereits), dabei aber weiterhin vertikal zentriert bleiben. Ich hab schon Verschiedenes versucht, zum Beispiel mit Flexbox, ich bekomme es aber nicht hin. Entweder nutze ich das falsche Werkzeug oder die Syntax ist falsch.
Habt Ihr eine Idee?

__________

HTML: 
<html>
<style>
 

body {background-color:#5c676d;}
.rahmen {background:none; display:flex; justify-content:center; align-items:flex-start; flex-flow:row; width:100%; gap:12px; margin-top:25px; padding:0 20px}
.spalte {width:304px; height:100%; background-color:#6c787e; border-radius:8px; padding-bottom:15px;}
.spaltenkopf {background:none; margin-bottom:14px}

.linkcontainer {display:flex; justify-content:center; align-items:flex-start; flex-flow:row wrap; gap:36px 12px; padding:0 10px 20px 10px}
.linkcontainer2 {display:flex; justify-content:center; align-items:flex-start; flex-flow:row wrap; gap:36px 12px; padding:0 10px}
.link {background-color:none; position:relative; width:80px; height:102px; border-radius:8px; align-self:normal;text-align: center;}
.linkimage {background-color:aqua; margin:0 0 3px 0; padding:0;}
img {width:95%; border-radius:8px; margin:0; padding:0; box-shadow:rgba(0,0,0,0.5) 0 2px 4px;}
img:hover {box-shadow:rgba(255,255,255,1.0) 0 1px 5px;}
.linktext {background-color:none; width:100%; font-family:kcl; color:#fff; font-size:15px; line-height:20px; text-align:center; text-decoration:none; text-shadow:rgba(0,0,0,0.7) 0 2px 2px; letter-spacing:0.3px;}

h1 {font-family:kl; color:#fff; font-size:16px; line-height:5px; text-align:center; text-shadow:rgba(0,0,0,0.5) 0 2px 4px; margin-bottom:0px;}
hr {border:none; width:auto; border-top:1px dashed; height:1px; color:#ccc; margin:16px 14px; padding:0px; display:block}
a {text-decoration:none; color:#888;}


</style>



<main>


<!-- Spalte 1 -->





    <div class="rahmen">


        <div class="spalte">
            <div class="spaltenkopf">
                <h1>Spalte 1</h1>
                <hr>
            </div>             

            <div class="linkcontainer">                 
                <div class="link">
                    <a href="#" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*.jpg">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                 </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*.jpg">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*.jpg">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>         
            </div>
        </div>



      
    <!-- Spalte 2 -->





        <div class="spalte">
            <div class="spaltenkopf">
                <h1>Spalte 2</h1>
                <hr>                 
            </div>
              
          
            <div class="linkcontainer">                 
                <div class="link">
                    <a href="#" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*.jpg">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                 </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>         
            </div>
        </div>






    <!-- Spalte 3 -->





        <div class="spalte">
            <div class="spaltenkopf">
                <h1>Spalte 3</h1>
                <hr>
            </div>
          
            <div class="linkcontainer">                 
                <div class="link">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                 </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>
              
              
                <div class="link" id="desktop">
                    <a href="" target="_blank" rel="noopener">
                        <div class="linkimage">
                            <img src="img/startseite/*">
                        </div>
                  
                        <div class="linktext">
                            Linktext
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>




</main>
</html>
 
Zuletzt bearbeitet von einem Moderator:
  • DIV-Elemente vertikal zentrieren Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Hallo Sunlion und willkommen im Forum!
Ich habe zwar schon viele Jahre Webprogrammier-Erfahrung, diese aber schon lange nicht mehr aktiv angewandt und bin daher etwas eingerostet.
Zum Vergrößern anklicken....
Du hast vollkommen Recht, in den letzten Jahren hat sich vieles verändert in der Webentwicklung und das Positive ist, dass vieles einfacher geworden ist.
vertikal auf dem Bildschirm zentrieren
...

Ich hab schon Verschiedenes versucht, zum Beispiel mit Flexbox, ich bekomme es aber nicht hin.
Zum Vergrößern anklicken....
Genau die vertikale Zentrierung war früher ein Drama und ist jetzt durch Flexbox ein Kinderspiel.

Zunächst mal ist jedoch dein HTML und CSS fehlerhaft, Du solltest zunächst mal die Fehler beseitigen. Benutze entweder den Validator:
https://validator.w3.org
Oder installiere einen Editor, der dir die Fehler anzeigt, Visual-Studio-Code ist ein sehr guter.

Dein Code kommt mir sehr bekannt vor, entweder Du hast diese Aufgabe wo anders ebenfalls gepostet oder Du bist jemand anderes mit der selben Aufgabe?
 
  • DIV-Elemente vertikal zentrieren Beitrag #3
S
Sunlion
New member
Beiträge
3
Punkte Reaktionen
0
Sempervivum schrieb:
Dein Code kommt mir sehr bekannt vor, entweder Du hast diese Aufgabe wo anders ebenfalls gepostet oder Du bist jemand anderes mit der selben Aufgabe?
Zum Vergrößern anklicken....
Vielleicht weil mein Code genauso schlecht ist, wie der des anderen und Dir deshalb bekannt vorkommt. :ROFLMAO:
Als Editor nutze ich Notepad++.
 
  • DIV-Elemente vertikal zentrieren Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Notepad++ habe ich nie benutzt und weiß nicht, ob er eine Anzeige von Syntaxfehlern unterstützt. Wenn nicht, würde ich schnellstens auf VS-Code umstellen, denn dieses Feature ist eine riesige Hilfe bei der Entwicklung.
 
  • DIV-Elemente vertikal zentrieren Beitrag #5
S
Sunlion
New member
Beiträge
3
Punkte Reaktionen
0
Gut, schau ich mir mal an.
Ich habe im XHTML-Forum zu dieser Webseite schon mal eine Anfrage gestellt, vielleicht kennst Du mich ja von dort.
 
Thema:

DIV-Elemente vertikal zentrieren

Oben Unten