Ergebnis 1 bis 5 von 5
  1. 02-02-2021, 21:51 #1
    trix0
    trix0 ist offline 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;
}
    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.
    Zitieren Zitieren
  2. 03-02-2021, 11:14 #2
    Avatar von mikdoe
    mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.879

    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 http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Zitieren Zitieren
  3. 03-02-2021, 12:05 #3
    trix0
    trix0 ist offline 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 ausrichten
    Geändert von trix0 (03-02-2021 um 11:54 Uhr)
    Zitieren Zitieren
  4. 03-02-2021, 14:46 #4
    daniel220786
    daniel220786 ist offline Grünschnabel
    registriert
    29-11-2020
    Beiträge
    4

    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
    https://codepen.io/basti1012/pen/wvoBNVo

    PS: Du benutzt Id's doppelt und dreifach das geht gar nicht.
    Geändert von mikdoe (03-02-2021 um 17:10 Uhr) Grund: Typo
    Zitieren Zitieren
  5. 06-02-2021, 13:36 #5
    trix0
    trix0 ist offline 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
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. [GELÖST] Elemente vertikal anordnen
    Von bermany im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 08-01-2017, 19:31
  2. [HOW-TO/TUTORIAL] CSS 3 Flexbox
    Von mikdoe im Forum Links & Tutorials mit Tipps & Tricks zu JavaScript, CSS, PHP, MySQL
    Antworten: 1
    Letzter Beitrag: 13-05-2014, 08:04
  3. Horizontal+Vertikal
    Von blaupunkt im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 28-10-2011, 00:40
  4. Datumsanzeige ausrichten (document.write ausrichten)
    Von neuroscientist im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-10-2006, 00:13
  5. Seite 100% vertikal
    Von maNiAcX im Forum Allgemeines
    Antworten: 2
    Letzter Beitrag: 05-11-2003, 17:29

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln