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:
und hier mein css-code:
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.
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:
<!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.
