Ergebnis 1 bis 5 von 5
-
02-02-2021, 20:51 #1
Grünschnabel
- registriert
- 01-02-2021
- Beiträge
- 4
Flexbox Elemente vertikal ausrichten
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; }
-
03-02-2021, 10:14 #2
AW: Flexbox Elemente vertikal ausrichten
Hi!
Lässt sich das Problem mit weniger Code oder noch viel besser mit einem jsfiddle zeigen?Das deutsche Javascript Forum http://forum.jswelt.de
-
03-02-2021, 11:05 #3
Grünschnabel
- registriert
- 01-02-2021
- Beiträge
- 4
AW: Flexbox Elemente vertikal ausrichten
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 ausrichtenGeändert von trix0 (03-02-2021 um 10:54 Uhr)
-
03-02-2021, 13:46 #4
Jungspund
- registriert
- 29-11-2020
- Beiträge
- 18
AW: Flexbox Elemente vertikal ausrichten
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.Geändert von daniel220786 (14-01-2022 um 00:30 Uhr) Grund: Typo
-
06-02-2021, 12:36 #5
Grünschnabel
- registriert
- 01-02-2021
- Beiträge
- 4
AW: Flexbox Elemente vertikal ausrichten
So sollte das ganze aussehen:
beispiel.png
hoffe, man versteht mich nun besser
Ähnliche Themen
-
[GELÖST] Elemente vertikal anordnen
Von bermany im Forum CSS und (X)HTMLAntworten: 4Letzter Beitrag: 08-01-2017, 18:31 -
[HOW-TO/TUTORIAL] CSS 3 Flexbox
Von mikdoe im Forum Links & Tutorials mit Tipps & Tricks zu JavaScript, CSS, PHP, MySQLAntworten: 1Letzter Beitrag: 13-05-2014, 07:04 -
Horizontal+Vertikal
Von blaupunkt im Forum JavaScriptAntworten: 1Letzter Beitrag: 27-10-2011, 23:40 -
Datumsanzeige ausrichten (document.write ausrichten)
Von neuroscientist im Forum JavaScriptAntworten: 2Letzter Beitrag: 15-10-2006, 23:13 -
Seite 100% vertikal
Von maNiAcX im Forum AllgemeinesAntworten: 2Letzter Beitrag: 05-11-2003, 16:29
Lesezeichen