Flexbox Elemente vertikal ausrichten

**trix0** · 02-02-2021, 20:51

Hallo Community,

ich will mittels Flexbox die elemente darin Horizontal und Vertikal zentrieren, so das die darin enthaltene Elemente eben genau mittig auf dem Bildschirm ausgegeben werden. doch leider hapert es bei mir momentan, diese vertical zu zentireren. Ich dachte, das man dafür die eigenschaft align-items benötigt, doch leider stimmt das anscheinend nicht.

hier meine html-code:

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height">
    <title>Document</title>
    <link rel="stylesheet" href="less.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
    $( function() {
    $( "#table1, #table2, #table3" ).sortable({
      connectWith: ".list"
    }).disableSelection();
  } );
  </script>
</head>
    <body>
         

                <div class="board">
                    <div class="stuff">
                        <div class="test">
                            Handy
                        </div>
                        <div class="test">
                            phone
                        </div>
                        <div class="test">
                            Rucksack
                        </div>
                    </div>
                </div>
            
                <div class="board">
                    
                    <div class="head"> Inventar</div>

                    <div id="table1" class="list">
                    
                        <div  class="item"> 
                            
                        <div><img src="./Erze/stein_1.png" width=45px height=45px> </div>
                            <div id="name">Eisenerz </div> 
                            <div id="weigth">Gewicht: 0,2kg</div> 
                            <div id="Value">x2</div>
                    
                        </div>
                        <div  class="item">List Item 4</div>
                    </div>
                </div>

                <div class="board">
                    
                    <div class="head">Rucksack</div>

                    <div id="table1" class="list">
                    
                        <div  class="item"> 
                            
                        <div><img src="./Erze/stein_1.png" width=45px height=45px> </div>
                            <div id="name">Eisenerz </div> 
                            <div id="weigth">Gewicht: 0,2kg</div> 
                            <div id="Value">x2</div>
                    
                        </div>
                        <div  class="item">List Item 4</div>
                    </div>
                </div>

                <div class="board">
                    
                    <div class="head">Maschine</div>

                    <div id="table1" class="list">
                    
                        <div  class="item"> 
                            
                        <div><img src="./Erze/stein_1.png" width=45px height=45px> </div>
                            <div id="name">Eisenerz </div> 
                            <div id="weigth">Gewicht: 0,2kg</div> 
                            <div id="Value">x2</div>
                    
                        </div>
                        <div  class="item">List Item 4</div>
                    </div>
                </div>
            </div>
    
       
       
       
        
      
        
    </body>


</html>

und hier mein css-code:

Code:

body{
    display: flex;    
    flex:1;
    flex-flow: row;
    justify-content: center;
    align-content: center;
    color: white;

    
    
    background-color: green;
} 

.board{
    display: flex;
    
    flex-direction: column;
    align-items: center;

    background-color: grey;

    margin: 0 10px;

    width: 300px;
    height: 500px;
    border-radius: 5%;
}

.board .head{
    display: flex;
    flex: 0.1;

    align-items: center;
    justify-content: center;
    width: 100%;
    
    background-color: rgb(150, 0, 0);
}
.board .list{

    display: flex;
    flex: 1;
    width: 100%;
    height: 30px;
    background-color: rgba(0,0,0,0.5);
    align-content: center;

    flex-flow: column;
}

.board .list .item{
    display:flex;
   
    flex-direction:row;
    align-items: center;
    height: 50px;
    background-color: rgba(0,0,0,0.8);
    margin: 10px 10px;
    border-radius: 5%;
}

.board .list .item div{
    display:flex;
    flex: 1;
    flex-flow: row;
    justify-content: space-around;
}

im normalfall sollte ich das doch eig. über den body machen können oder irre ich mich da? weil die Seite ist auch bei mir komplett grün eingefärbt und die Elemente sind horizontal zentriert. nur eben nicht vertikal.

**mikdoe** · 03-02-2021, 10:14

Hi!
Lässt sich das Problem mit weniger Code oder noch viel besser mit einem jsfiddle zeigen?

**trix0** · 03-02-2021, 11:05

ja, habe es mal verkürzt hier dargestellt:

https://jsfiddle.net/m1gay0zn/5/

ich will die schriftzüge vertikal zentrieren über die Class-Eingenschaft

- - - Aktualisiert - - -

ich will den Text in die mitte des monitores bringen bzw. in dem fall einfach vertikal ausrichten

**daniel220786** · 03-02-2021, 13:46

Ich verstehe das auch nicht ganz.
Kannst du eine Grafik erstellen wie es aussehen soll ?
Das würde am einfachsten sein.
Dein Code aus Beitrag verstehe ich noch etwas.
Dein Code aus 3 macht es mir wieder etwas schwer.
Wie gesagt einfach eine Grafik malen wie es aussehen soll wäre für mich am einfachsten.

Ich verstehe das so ungefähr
**Link entfernt, weil Seite nicht mehr erreichbar **

PS: Du benutzt Id's doppelt und dreifach das geht gar nicht.